您当前的位置: 首页 > CMS教程 > 风讯CMS教程 > 自己写的一个JS的滚动类

自己写的一个JS的滚动类

作者:guanchaofeng 来源:本站整理 发布时间: 2009-04-05 14:55 点击:
//无间距滚动类 /* power by www.iebsoft.com author: yagas mail:yagas@163.com */ var marquee = function(root, row1, row2, style, width, height){ this.m_root = document.getElementById(root); this.m_row1 = document.getElementById(row1); this.m

自己写的一个JS的滚动类

  //无间距滚动类
  
  /*
  
  power by www.iebsoft.com
  
  author: yagas
  
  mail:yagas@163.com
  
  */
  
  var marquee = function(root, row1, row2, style, width, height){
  
  this.m_root = document.getElementById(root);
  
  this.m_row1 = document.getElementById(row1);
  
  this.m_row2 = document.getElementById(row2);
  
  this.m_style = style;
  
  this.m_root.style.overflow = "hidden";
  
  this.m_root.style.width = width;
  
  this.m_root.style.height = height;
  
  this.m_row2.innerHTML = this.m_row1.innerHTML;
  
  }
  
  marquee.prototype.scrolls = function(){
  
  switch(this.m_style){
  
  case 0:
  
  if(this.m_row2.offsetHeight - this.m_root.scrollTop <=0){
  
  this.m_root.scrollTop -= this.m_row1.offsetHeight;
  
  }else{
  
  this.m_root.scrollTop++;
  
  }
  
  break;
  
  case 1:
  
  if(this.m_row2.offsetWidth - this.m_root.scrollLeft <=0){
  
  this.m_root.scrollLeft -= this.m_row1.offsetWidth;
  
  }else{
  
  this.m_root.scrollLeft++;
  
  }
  
  break;
  
  }
  
  }
  
  marquee.prototype.star = function(obj, speed){
  
  var fm = function(){ obj.scrolls(); }
  
  var mt = setInterval(fm, speed);
  
  obj.m_root.onmouseover = function(){ clearInterval(mt); }
  
  obj.m_root.onmouseout = function(){ mt = setInterval(fm, speed); }
  
  }
  
  使用的方法
  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
  <html xmlns="http://www.w3.org/1999/xhtml">
  
  <head>
  
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  
  <title>无标题文档</title>
  
  <script language="javascript" type="text/javascript" src="js_marquee.js"></script>
  
  </head>
  
  <body>
  
  <!--横向滚动的模板-->
  
  <div id="root">
  
  <span id="r1">11111111122222222222233333333344444444555555555888666999000</span><span id="r2"></span>
  
  </div>
  
  <!--横向滚动的模板-->
  
  <!--横向滚动的代码-->
  
  <script language="javascript" type="text/javascript">
  
  // maqruee(滚动框架, 第一列的ID, 第二列的ID, 滚动的样式, 滚动框架的宽度, 滚动框架的高度)
  
  //滚动的样式:
  
  //0 从下往上滚动
  
  //1 从右向左滚动
  
  var tt = new marquee("root", "r1", "r2", 1, "150px", "20px");
  
  tt.star(tt, 50);
  
  //50 为滚动速度,值越大,滚动得越慢
  
  </script>
  
  <!--横向滚动的代码-->
  
  <br /><br /><br /><br /><br /><br /><br /><br /><br />
  
  <!--竖向滚动的模板-->
  
  <div id="hroot">
  
  <div id="hr1">111111111222222222222333333333<br />4444444455555555588866<br />6999000<br />333333333333333333333<br />555555555555555<br />88888888888888888</div>
  
  <div id="hr2"></div>
  
  </div>
  
  <!--竖向滚动的模板-->
  
  <!--竖向滚动的代码-->
  
  <script language="javascript" type="text/javascript">
  
  // maqruee(滚动框架, 第一行的ID, 第二行的ID, 滚动的样式, 滚动框架的宽度, 滚动框架的高度)
  
  var htt = new marquee("hroot", "hr1", "hr2", 0, "150px", "50px");
  
  htt.star(htt, 50);
  
  //50 为滚动速度,值越大,滚动得越慢
  
  </script>
  
  <!--竖向滚动的代码-->
  
  </body>
  
  </html> 

分享到:
本文"自己写的一个JS的滚动类"由远航站长收集整理而来,仅供大家学习与参考使用。更多网站制作教程尽在远航站长站。
顶一下
(0)
0%
踩一下
(0)
0%
[点击 次] [返回上一页] [打印]
相关文章
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
关于本站 - 联系我们 - 网站声明 - 友情连接- 网站地图 - 站点地图 - 返回顶部
Copyright © 2007-2013 www.yhzhan.com(远航站长). All Rights Reserved .
远航站长:为中小站长提供最佳的学习与交流平台,提供网页制作与网站编程等各类网站制作教程.
官方QQ:445490277 网站群:26680406 网站备案号:豫ICP备07500620号-4