js实现文字无缝向上滚动

2019-11-19 17:33:02

字体：大中小

来源：转载

供稿：网友

静态效果如下：（动态效果复制粘贴下面代码可见）

代码如下：

<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <style type="text/css"> *{ padding: 0; margin:0; } ul,li{ list-style: none } .scroll { height:90px; width:100%; max-width:640px; background-color:#000; overflow:hidden; color: #fff; } .scroll ul { width:100%; position:absolute; left:0; top:0; } .scroll span { font-size:20px; height:30px; /*color:#D83E21; */ } .scroll li { height:30px; line-height:30px; } </style></head><body> <div id="scroll" class="scroll clearfix">  <ul>  <li>444444444444444444444444</li>  <li>11111111111111111111111111</li>  <li>11111111111111111111111111</li>  <li>11111111111111111111111111</li>  <li>11111111111111111111111111</li>  <li>33333333333333333333333333</li>  <li>11111111111111111111111111</li>  <li>11111111111111111111111111</li>  <li>11111111111111111111111111</li>  <li>11111111111111111111111111</li>  <li>11111111111111111111111111</li>  <li>2222222222222</li>  </ul> </div></body></html><script type="text/javascript">  //滚动 var scrollIndex=0; var Timer=null; function scroll_f(){  clearInterval(Timer);  var ul=$("#scroll ul");  var li=ul.children("li");  var h=li.height();  var index=0;  ul.css("height",h*li.length*2);  ul.html(ul.html()+ul.html());         function run()         {         if(scrollIndex>=li.length){          ul.css({top:0});          scrollIndex=1;          ul.animate({top:-scrollIndex*h},200);         }          else{          scrollIndex++;           ul.animate({top:-scrollIndex*h},200);         }         }     Timer=setInterval(run,1500);  } $(function(){  scroll_f(); })</script>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：JavaScript实现的XML与JSON互转功能详解

下一篇：node学习记录之搭建web服务器教程