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   class="ldvbbrz"   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,  //定時器 數(shù)值越小，滾動的速度越快(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需再刷新一下頁面才能執(zhí)行]

javascript操作元素的常見方法小結
這篇文章主要介紹了javascript操作元素的常見方法,結合實例形式總結分析了JavaScript針對頁面元素動態(tài)獲取、賦值、動態(tài)操作相關使用技巧,需要的朋友可以參考下
2019-11-11
使用Cookies保存網站歷史瀏覽記錄實例代碼
仿淘寶網的最近瀏覽記錄功能，喜歡的朋友可以參考下。
2010-07-07
javascript html5實現(xiàn)表單驗證
這篇文章主要為大家詳細介紹了javascript html5實現(xiàn)表單驗證的具體代碼，感興趣的小伙伴們可以參考一下
2016-03-03
JavaScript使用delete刪除數(shù)組元素用法示例【數(shù)組長度不變】
這篇文章主要介紹了JavaScript使用delete刪除數(shù)組元素用法,結合實例形式分析了delete刪除數(shù)組元素的具體用法與注意事項,需要的朋友可以參考下
2017-01-01
微信小程序上傳圖片到別的域名文件下的示例代碼
這篇文章主要介紹了微信小程序上傳圖片到別的域名文件下的示例代碼,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2023-12-12
javascript使用appendChild追加節(jié)點實例
這篇文章主要介紹了javascript使用appendChild追加節(jié)點的方法,實例分析了appendChild()函數(shù)增加結點的使用技巧,需要的朋友可以參考下
2015-01-01
javascript 中的圖像加載事件及問題解析
本文將討論如何在JavaScript中處理 .onload 事件，我們將學習如何在上傳圖像后使用 JavaScript 創(chuàng)建警告框,需要的朋友可以參考下
2023-07-07
通俗易懂地解釋JS中的閉包
本文通過示例代碼給大家介紹了js中的閉包，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧
2017-10-10
Javascript 面向對象特性
很少有人對JavaScript的面向對象特性進行系統(tǒng)的分析。我希望接下來的文字讓你了解到這個語言最少為人知的一面。
2009-12-12
JS加載iFrame出現(xiàn)空白問題的解決辦法
在使用IE6瀏覽器開發(fā)過程中出現(xiàn)各種奇葩問題，非常棘手，費勁腦汁終于問題解決。小編把解決辦法分享到腳本之家平臺，需要的朋友可以參考下
2016-05-05