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需再刷新一下页面才能执行]

PWA介绍及快速上手搭建一个PWA应用的方法
这篇文章主要介绍了PWA介绍及快速上手搭建一个PWA应用的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
JavaScript实现页面电子时钟
这篇文章主要为大家详细介绍了JavaScript实现页面电子时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
Javascript点击其他任意地方隐藏关闭DIV实例
这篇文章主要分享一个Javascript点击其他任意地方隐藏关闭DIV实例,需要的朋友可以参考下。
2016-06-06
canvas压缩图片转换成base64格式输出文件流
本文主要介绍了canvas压缩图片转换成base64格式输出文件流的方法，具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
webpack中的filename 和 chunkFilename 的区别实例解析
filename 指列在 entry 中,打包后输出的文件的名称,chunkFilename 指未列在 entry 中,却又需要被打包出来的文件的名称,这篇文章主要介绍了webpack中的filename 和 chunkFilename 的区别实例解析,需要的朋友可以参考下
2023-11-11
javascript使用shift+click实现选择和反选checkbox的方法
这篇文章主要介绍了javascript使用shift+click实现选择和反选checkbox的方法,涉及javascript针对键盘按键的判断及checkbox的操作技巧,需要的朋友可以参考下
2015-05-05
js文件中引入另一个js文件的4种方法总结
JavaScript文件是一个文本类型的文件,在任何文本编辑器中都可以被打开和编辑,JavaScript文件的扩展名为js,这篇文章主要给大家介绍了关于js文件中引入另一个js文件的4种方法总结,需要的朋友可以参考下
2023-12-12
Javascript基础之数组的使用
这篇文章主要介绍了Javascript基础之数组的使用的相关资料，介绍的非常详解，具有参考借鉴价值，感兴趣的朋友一起学习吧
2016-05-05
JS控制文本域只读或可写属性的方法
这篇文章主要介绍了JS控制文本域只读或可写属性的方法,涉及javascript针对页面元素属性的动态操作技巧,需要的朋友可以参考下
2016-06-06
JavaScript 数组循环引起的思考
Google array.js 程序中建议改进的代码。思考为什么i-- 到了 i为0时while循环结束了？
2010-01-01