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;

}

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

})

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