使用JavaScript怎么实现一个文字无缝上下滚动功能

tangjin

作者

使用JavaScript怎么实现一个文字无缝上下滚动功能？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

具体如下：

使用JavaScript怎么实现一个文字无缝上下滚动功能

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<metaname="author"content=""/>
<title>文字列表无缝滚动代码</title>
<styletype="text/css">
*{
margin:0px;
padding:0px;
border:0px;
}
body{font-size:12px}
#demo{
overflow:hidden;
height:80px;
width:280px;
margin:90pxauto;
position:relative;
}
#demo1{
height:auto;
text-align:left;
}
#demo2{
height:auto;
text-align:left;
}
#demo1li{
list-style-type:none;
height:22px;
text-align:left;
text-indent:15px;
}
#demo2li{
list-style-type:none;
height:22px;
text-align:left;
text-indent:15px;
}
</style>
</head>
<body>
<divid="demo">
<ulid="demo1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<divid="demo2"></div>
</div>
<scripttype="text/javascript">
varspeed=40
//向上滚动
vardemo=document.getElementById("demo");
vardemo2=document.getElementById("demo2");
vardemo1=document.getElementById("demo1");
demo2.innerHTML=demo1.innerHTML
functionMarquee(){
if(demo.scrollTop>=demo1.offsetHeight){
demo.scrollTop=0;
}
else{
demo.scrollTop=demo.scrollTop+1;
}
}
varMyMar=setInterval(Marquee,speed)
demo.onmouseover=function(){clearInterval(MyMar)}
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
//向下滚动
//demo2.innerHTML=demo1.innerHTML
//demo.scrollTop=demo.scrollHeight
//functionMarquee2(){
//if(demo1.offsetTop-demo.scrollTop>=0)
//demo.scrollTop+=demo2.offsetHeight
//else{
//demo.scrollTop--
//}
//}
//varMyMar2=setInterval(Marquee2,speed)
//demo.onmouseover=function(){clearInterval(MyMar2)}
//demo.onmouseout=function(){MyMar2=setInterval(Marquee2,speed)}
</script>
</body>
</html>

看完上述内容，你们掌握使用JavaScript怎么实现一个文字无缝上下滚动功能的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注恰卡编程网行业资讯频道，感谢各位的阅读！

阅读全文

发布于 2021-04-15 01:55:41

javascript