成都网站建设设计

将想法与焦点和您一起共享

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如何实现文字无缝向上滚动效果
分享URL:http://chengdu.cdxwcx.cn/article/piodsj.html

其他资讯