javascript 三组文字间隙滚动实例代码

更新时间：2008年06月24日 21:36:26 作者：

非常实用的文字间隙滚动效果代码

<html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  <meta http-equiv="Content-Language" content="zh-CN">  <title>三组文字间隙滚动</title>  <style type="text/css">   *{font-size:12px;}   #scrollBox2{width:150px; height:64px; line-height:22px; overflow:hidden; background-color:#eee;}  </style>  </head>  <body>  国家 汇率名称 今日汇率   <div id="scrollBox2">      美元USD &#320;.775%<br>      港币HKD &#320;.75%<br>      英镑GBP &#320;.50%<br>      欧元EUR &#320;.25%<br>      日元JPY &#320;.01%<br>  </div>  <script>  window.onload=function(){    new Marquee(      "scrollBox2",  //容器ID<br>      0,  //向上滚动(0向上 1向下 2向左 3向右)<br>      2,  //滚动的步长<br>      200,  //容器可视宽度<br>      64,  //容器可视高度<br>      50,  //定时器 数值越小，滚动的速度越快(1000=1秒,建议不小于20)<br>      2000,  //间歇停顿时间(0为不停顿,1000=1秒)<br>      1000,  //开始时的等待时间(0为不等待,1000=1秒)<br>      22  //间歇滚动间距(可选)<br>      );    };  function Marquee(){    this.ID=document.getElementById(arguments[0]);    this.Direction=arguments[1];    this.Step=arguments[2];    this.Width=arguments[3];    this.Height=arguments[4];    this.Timer=arguments[5];    this.WaitTime=arguments[6];    this.StopTime=arguments[7];    if(arguments[8]){this.ScrollStep=arguments[8];}else{this.ScrollStep=this.Direction>1?this.Width:this.Height;}    this.CTL=this.StartID=this.Stop=this.MouseOver=0;    this.ID.style.overflowX=this.ID.style.overflowY="hidden";    this.ID.noWrap=true;    this.ID.style.width=this.Width;    this.ID.style.height=this.Height;    this.ClientScroll=this.Direction>1?this.ID.scrollWidth:this.ID.scrollHeight;    this.ID.innerHTML+=this.ID.innerHTML;    this.Start(this,this.Timer,this.WaitTime,this.StopTime);    }  Marquee.prototype.Start=function(msobj,timer,waittime,stoptime){    msobj.StartID=function(){msobj.Scroll();}    msobj.Continue=function(){      if(msobj.MouseOver==1){setTimeout(msobj.Continue,waittime);}      else{clearInterval(msobj.TimerID); msobj.CTL=msobj.Stop=0; msobj.TimerID=setInterval(msobj.StartID,timer);}      }    msobj.Pause=function(){msobj.Stop=1; clearInterval(msobj.TimerID); setTimeout(msobj.Continue,waittime);}    msobj.Begin=function(){      msobj.TimerID=setInterval(msobj.StartID,timer);      msobj.ID.onmouseover=function(){msobj.MouseOver=1; clearInterval(msobj.TimerID);}      msobj.ID.onmouseout=function(){msobj.MouseOver=0; if(msobj.Stop==0){clearInterval(msobj.TimerID); msobj.TimerID=setInterval(msobj.StartID,timer);}}      }    setTimeout(msobj.Begin,stoptime);    }  Marquee.prototype.Scroll=function(){    switch(this.Direction){      case 0:        this.CTL+=this.Step;        if(this.CTL>=this.ScrollStep&&this.WaitTime>0){this.ID.scrollTop+=this.ScrollStep+this.Step-this.CTL; this.Pause(); return;}        else{if(this.ID.scrollTop>=this.ClientScroll) this.ID.scrollTop-=this.ClientScroll; this.ID.scrollTop+=this.Step;}        break;      case 1:        this.CTL+=this.Step;        if(this.CTL>=this.ScrollStep&&this.WaitTime>0){this.ID.scrollTop-=this.ScrollStep+this.Step-this.CTL; this.Pause(); return;}        else{if(this.ID.scrollTop<=0) this.ID.scrollTop+=this.ClientScroll; this.ID.scrollTop-=this.Step;}        break;      case 2:        this.CTL+=this.Step;        if(this.CTL>=this.ScrollStep&&this.WaitTime>0){this.ID.scrollLeft+=this.ScrollStep+this.Step-this.CTL; this.Pause(); return;}        else{if(this.ID.scrollLeft>=this.ClientScroll) this.ID.scrollLeft-=this.ClientScroll; this.ID.scrollLeft+=this.Step;}        break;      case 3:        this.CTL+=this.Step;        if(this.CTL>=this.ScrollStep&&this.WaitTime>0){this.ID.scrollLeft-=this.ScrollStep+this.Step-this.CTL; this.Pause(); return;}        else{if(this.ID.scrollLeft<=0) this.ID.scrollLeft+=this.ClientScroll; this.ID.scrollLeft-=this.Step;}        break;      }    }  </script>  <p>　</p>  <p>　</p>  <p>　</p>  </body>  </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

javascript操作元素的常见方法小结
这篇文章主要介绍了javascript操作元素的常见方法,结合实例形式总结分析了JavaScript针对页面元素动态获取、赋值、动态操作相关使用技巧,需要的朋友可以参考下
2019-11-11
使用Cookies保存网站历史浏览记录实例代码
仿淘宝网的最近浏览记录功能，喜欢的朋友可以参考下。
2010-07-07
javascript html5实现表单验证
这篇文章主要为大家详细介绍了javascript html5实现表单验证的具体代码，感兴趣的小伙伴们可以参考一下
2016-03-03
JavaScript使用delete删除数组元素用法示例【数组长度不变】
这篇文章主要介绍了JavaScript使用delete删除数组元素用法,结合实例形式分析了delete删除数组元素的具体用法与注意事项,需要的朋友可以参考下
2017-01-01
微信小程序上传图片到别的域名文件下的示例代码
这篇文章主要介绍了微信小程序上传图片到别的域名文件下的示例代码,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-12-12
javascript使用appendChild追加节点实例
这篇文章主要介绍了javascript使用appendChild追加节点的方法,实例分析了appendChild()函数增加结点的使用技巧,需要的朋友可以参考下
2015-01-01
javascript 中的图像加载事件及问题解析
本文将讨论如何在JavaScript中处理 .onload 事件，我们将学习如何在上传图像后使用 JavaScript 创建警告框,需要的朋友可以参考下
2023-07-07
通俗易懂地解释JS中的闭包
本文通过示例代码给大家介绍了js中的闭包，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
2017-10-10
Javascript 面向对象特性
很少有人对JavaScript的面向对象特性进行系统的分析。我希望接下来的文字让你了解到这个语言最少为人知的一面。
2009-12-12
JS加载iFrame出现空白问题的解决办法
在使用IE6浏览器开发过程中出现各种奇葩问题，非常棘手，费劲脑汁终于问题解决。小编把解决办法分享到脚本之家平台，需要的朋友可以参考下
2016-05-05

javascript 三组文字间隙滚动实例代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具