Js+CSS間斷和不間斷文字滾動程式碼

dbhelper發表於2014-11-27
JSCSS
  • Js+CSS間斷和不間斷文字滾動程式碼，文字在一行高度範圍內不間斷滾動，還有一個是間斷滾動，滾動一次後會稍停片刻再次滾動。

點選(此處)摺疊或開啟

  1. <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"\">
  2. <html xmlns=\"\">
  3. <head>
  4. <title></title>
  5. <meta http-equiv=\"content-type\" content=\"text/html;charset=gb2312\">
  6. <style type=\"text/css\">
  7. .box{width:150px;height:25px;line-height:25px;border:#bbb 1px solid;overflow:hidden;}
  8. .box ul{margin:0;padding:0}
  9. .box li{height:25px;line-height:25px;font-size:12px;text-align:center;list-style-type:none;}
  10. </style>
  11. </head>
  12. <body>
  13. <div class=\"box\" id=\"marqueebox0\">
  14.     <ul>
  15.         <li style=\"background:#f8e2ac;\">第一行</li>
  16.         <li style=\"background:#f5f5f5;\">第二行</li>
  17.         <li style=\"background:#ffe6ec;\">第三行</li>
  18.     </ul>
  19. </div><br>
  20. <div class=\"box\" id=\"marqueebox1\">
  21.     <ul>
  22.         <li style=\"background:#f8e2ac;\">第一行</li>
  23.         <li style=\"background:#f5f5f5;\">第二行</li>
  24.         <li style=\"background:#ffe6ec;\">第三行</li>
  25.     </ul>
  26. </div>
  27. <script type=\"text/javascript\">
  28. function startmarquee(lh,speed,delay,index){
  29.     var t;
  30.     var p=false;
  31.     var o=document.getElementById(\"marqueebox\"+index);
  32.     o.innerHTML+=o.innerHTML;
  33.     o.onmouseover=function(){p=true}
  34.     o.onmouseout=function(){p=false}
  35.     o.scrollTop = 0;
  36.     function start(){
  37.         t=setInterval(scrolling,speed);
  38.         if(!p){ o.scrollTop += 1;}
  39.     }
  40.     function scrolling(){
  41.         if(o.scrollTop%lh!=0){
  42.             o.scrollTop += 1;
  43.             if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0;
  44.         }else{
  45.             clearInterval(t);
  46.             setTimeout(start,delay);
  47.         }
  48.     }
  49.     setTimeout(start,delay);
  50. }
  51. startmarquee(25,30,3000,0);
  52. startmarquee(25,40,0,1);
  53. </script>
  54. </body>
  55. </html>


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/8494287/viewspace-1349488/，如需轉載，請註明出處，否則將追究法律責任。

相關文章