首页 > 代码库 > Js间断/连续的文字滚动代码

Js间断/连续的文字滚动代码

2024-07-15 23:13:59   224人阅读

Js文字滚动代码，可设置间断滚动和连续滚动。滚动时是向上滚动的，控制Li列表滚动，兼容性表现地不错，兼容IE/火狐、Opera等浏览器，代码如下：前端框架分享

.代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">  
  2. <html>  
  3. <head>  
  4. <title>文字间隔滚动代码-兼容IE和FireFox</title>  
  5. <style type="text/css">  
  6. <!--  
  7. body {  
  8.     text-align:center;  
  9. }  
  10. ul{  
  11. margin:0px;  
  12. padding:0px;  
  13. list-style:none;  
  14. }  
  15. #andyscroll {  
  16.     overflow: hidden;  
  17.     background: #E8F8F8;  
  18.     padding: 0 10px;  
  19.     text-align: left;  
  20.     width:400px;  
  21.     height:100px;  
  22.     overflow:hidden;  
  23. }  
  24. #andyscroll a {  
  25.     font:12px/18px tahoma;  
  26.     color: #000;   
  27.     float:left;  
  28.     width:100%;  
  29.     text-decoration: none;  
  30.     display:block;  
  31. }  
  32. #andyscroll a:hover {  
  33.     font:12px/18px tahoma;  
  34.     color: #F60;  
  35. }  
  36. -->  
  37. </style>  
  38. </head>  
  39. <body>  
  40. <div id="andyscroll">  
  41. <div id="scrollmessage">  
  42. <UL>  
  43. <li><a href=http://www.mamicode.com/"#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>  
  44. <li><a href=http://www.mamicode.com/"#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>  
  45. <li><a href=http://www.mamicode.com/"#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>  
  46. <li><a href=http://www.mamicode.com/"#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>  
  47. <li><a href=http://www.mamicode.com/"#">完全兼容IE, FF, Opera, 其它的还未经测试……</a></li>  
  48. <li><a href=http://www.mamicode.com/"#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>  
  49. <li><a href=http://www.mamicode.com/"#">完全兼容IE, FF, Opera, 其它的还未经测试……</a></li>  
  50. <li><a href=http://www.mamicode.com/"#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>  
  51. <ul>  
  52. </div>  
  53. </div>  
  54. <script type="text/javascript">  
  55. var stopscroll = false;  
  56. var scrollElem = document.getElementById("andyscroll");  
  57. var marqueesHeight = scrollElem.style.height;  
  58. scrollElem.onmouseover = new Function(‘stopscroll = true‘);  
  59. scrollElem.onmouseout  = new Function(‘stopscroll = false‘);  
  60. var preTop = 0;  
  61. var currentTop = 0;  
  62. var stoptime = 0;  
  63. var leftElem = document.getElementById("scrollmessage");   
  64. scrollElem.appendChild(leftElem.cloneNode(true));  
  65. init_srolltext();  
  66. function init_srolltext(){  
  67.     scrollElem.scrollTop = 0;  
  68.     setInterval(‘scrollUp()‘, 35);//确定滚动速度的, 数值越小, 速度越快  
  69. }  
  70. function scrollUp(){  
  71.     if(stopscroll) return;  
  72.     currentTop += 1; //设为1, 可以实现间歇式的滚动; 设为2, 则是连续滚动  
  73.     if(currentTop == 19) {  
  74.         stoptime += 1;  
  75.         currentTop -= 1;  
  76.         if(stoptime == 180) {  
  77.             currentTop = 0;  
  78.             stoptime = 0;  
  79.         }  
  80.     }else{  
  81.         preTop = scrollElem.scrollTop;  
  82.         scrollElem.scrollTop += 1;  
  83.         if(preTop == scrollElem.scrollTop){  
  84.             scrollElem.scrollTop = 0;  
  85.             scrollElem.scrollTop += 1;  
  86.         }  
  87.     }  
  88. }  
  89. </script>  
  90. </body>  
  91. </html>  

 


联系
我们