您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
使用JavaScript怎么实现一个文字无缝上下滚动功能?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
具体如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="" /> <title>文字列表无缝滚动代码</title> <style type="text/css"> *{ margin:0px; padding:0px; border:0px; } body{font-size:12px} #demo{ overflow:hidden; height:80px; width:280px; margin:90px auto; position:relative; } #demo1{ height:auto; text-align:left; } #demo2{ height:auto; text-align:left; } #demo1 li{ list-style-type:none; height:22px; text-align:left; text-indent:15px; } #demo2 li{ list-style-type:none; height:22px; text-align:left; text-indent:15px; } </style> </head> <body> <div id="demo"> <ul id="demo1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> <div id="demo2"></div> </div> <script type="text/javascript"> var speed=40 // 向上滚动 var demo=document.getElementById("demo"); var demo2=document.getElementById("demo2"); var demo1=document.getElementById("demo1"); demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo.scrollTop>=demo1.offsetHeight){ demo.scrollTop=0; } else{ demo.scrollTop=demo.scrollTop+1; } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function(){clearInterval(MyMar)} demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)} //向下滚动 // demo2.innerHTML=demo1.innerHTML // demo.scrollTop=demo.scrollHeight // function Marquee2(){ // if(demo1.offsetTop-demo.scrollTop>=0) // demo.scrollTop+=demo2.offsetHeight // else{ // demo.scrollTop-- // } // } // var MyMar2=setInterval(Marquee2,speed) // demo.onmouseover=function() {clearInterval(MyMar2)} // demo.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)} </script> </body> </html>
看完上述内容,你们掌握使用JavaScript怎么实现一个文字无缝上下滚动功能的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。