失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > JS实现跑马灯效果

JS实现跑马灯效果

时间:2022-04-01 15:50:33

相关推荐

JS实现跑马灯效果

JS代码如下:

C1为文本内容

D1单元格公式输入以下并用HTML显示内容

"<div id=\"demo\" style=\"height:250px;overflow:hidden;\"><div id=\"indemo\" style=\"height:200%;\">+"+"<div id=\"demo1\"> <br />"+REPLACE(C1,",","<br /><br />")+"<br /><br /> </div> <div id=\"demo2\"></div> </div> </div>"

加载结束事件JS

setTimeout(function(){ speed = 50;

var tab = document.getElementById("demo");

var tab1 = document.getElementById("demo1");

var tab2 = document.getElementById("demo2");

tab2.innerHTML = tab1.innerHTML;

tab.scrollTop = tab1.offsetHeight;

function Marquee(){

if (tab.scrollTop >= tab1.offsetHeight) {

tab.scrollTop-=tab2.offsetHeight;

}else{

tab.scrollTop+=1;

}

}

var MyMar=setInterval(Marquee,speed);

},1500);

innerHTML使用说明:/question/1957135221297859020.html

如果觉得《JS实现跑马灯效果》对你有帮助,请点赞、收藏,并留下你的观点哦!

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