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

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

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

      01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
      02 <html>
      03 <head>
      04 <title>文字间隔滚动代码-兼容IE和FireFox</title>
      05 <style type="text/css">
      06 <!--
      07 body {
      08     text-align:center;
      09 }
      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     400px;
      21     height:100px;
      22     overflow:hidden;
      23 }
      24 #andyscroll a {
      25     font:12px/18px tahoma;
      26     color: #000;
      27     float:left;
      28     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="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>
      44 <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>
      45 <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>
      46 <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>
      47 <li><a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a></li>
      48 <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>
      49 <li><a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a></li>
      50 <li><a href="#">完全兼容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>

原文地址:https://www.cnblogs.com/lizonghai/p/4639779.html