Js+CSS间断和不间断文本滚动代码

  • Js+CSS间断和不间断文本滚动代码,文字在一行高度范围内不间断滚动,还有一个是间断滚动,滚动一次后会稍停片刻再次滚动。

点击(此处)折叠或打开

  1. <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
  2. <html xmlns=\"http://www.w3.org/1999/xhtml\">
  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>


请使用浏览器的分享功能分享到微信等