javascript 三組文字間隙滾動實例代碼

2019-11-21 01:42:51

字體：大中小

來源：轉載

供稿：網友

<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   class="iwvjtn8m0"   id="scrollBox2">      美元USD ŀ.775%<br>      港幣HKD ŀ.75%<br>      英鎊GBP ŀ.50%<br>      歐元EUR ŀ.25%<br>      日元JPY ŀ.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在IE和Firefox上的差異及相互替代的實現方法第1/2頁

下一篇：動感超強的JS圖片輪換特效