JS文字间歇循环滚动效果怎么实现

互联网 18-3-17

这次给大家带来JS文字间歇循环滚动效果怎么实现，JS文字间歇循环滚动效果实现的注意事项有哪些，下面就是实战案例，一起来看一下。

具体代码如下：

<!DOCTYPE html>  <html>  <head>  <meta charset="utf-8"/>  <title>www.jb51.net - 间歇循环滚动</title>  <style>  #box{    height:240px;    width:300px;    margin:0 auto;    border:1px solid #0066FF;    overflow:hidden;    padding-bottom:20px;  }  #box li{    color:#333;    height:24px;  }  #box ul{    margin:0;    padding:0;  }  </style>  </head>  <body>  <p id="box">    <ul id="con1">      <li>PHP1</li>      <li>PHP2</li>      <li>PHP3</li>      <li>PHP4</li>      <li>PHP5</li>      <li>PHP6</li>      <li>PHP7</li>      <li>PHP8</li>      <li>PHP9</li>    </ul>  </p>  <script>  var area=document.getElementById("box");  area.innerHTML+=area.innerHTML;  var liHeight=24;  area.scrollTop=0;  var delay=2000;  var speed=50;  var time;  function starMove(){    area.scrollTop++;    time=setInterval("scrollUp()",speed);  }  function scrollUp(){    if(area.scrollTop%liHeight==0){    clearInterval(time);    setTimeout("starMove()",delay);    }else{    area.scrollTop++;    if(area.scrollTop>=area.offsetHeight/2){    area.scrollTop=0;    }    }  }  setTimeout("starMove()",delay);  </script>  </body>  </html>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

JS文字间歇循环滚动效果怎么实现

相关资讯

标签推荐