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://kswjz.com/article/piodsj.html
