700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html文字整体向上滚动代码 js实现文字无缝向上滚动

html文字整体向上滚动代码 js实现文字无缝向上滚动

时间:2020-11-01 22:53:01

相关推荐

html文字整体向上滚动代码 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;

}

444444444444444444444444111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111113333333333333333333333333311111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111112222222222222

//滚动

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();

})

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。