平武建站

js如何实现文字无缝向上滚动效果

这篇文章给大家分享的是有关js如何实现文字无缝向上滚动效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联专注于河西网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供河西营销型网站建设，河西网站制作、河西网页设计、河西网站官网定制、微信小程序开发服务，打造河西网络公司原创品牌,更为您提供河西网站排名全网营销落地服务。

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

js如何实现文字无缝向上滚动效果

代码如下：




 
 
 
 
 *{
 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;
 }
 


 
  
    
  
  • 444444444444444444444444
    • 
  
  • 11111111111111111111111111
    • 
  
  • 11111111111111111111111111
    • 
  
  • 11111111111111111111111111
    • 
  
  • 11111111111111111111111111
    • 
  
  • 33333333333333333333333333
    • 
  
  • 11111111111111111111111111
    • 
  
  • 11111111111111111111111111
    • 
  
  • 11111111111111111111111111
    • 
  
  • 11111111111111111111111111
    • 
  
  • 11111111111111111111111111
    • 
  
  • 2222222222222
    • 
  

 
   //滚动  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();  })

感谢各位的阅读！关于“js如何实现文字无缝向上滚动效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！


网站栏目：js如何实现文字无缝向上滚动效果
文章网址：http://pwwzsj.com/article/piodsj.html

其他资讯