JS实现简单的文字无缝上下滚动功能示例
2019-06-22 10:51
1151 查看
本文实例讲述了JS实现简单的文字无缝上下滚动功能。分享给大家供大家参考,具体如下:
<!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>
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- js实现简单易用的上下无缝滚动效果
- 10行原生JS实现文字无缝滚动(超简单)
- JS实现的N多简单无缝滚动代码(包含图文效果)
- 简单实现js间歇或无缝滚动效果
- angular实现的文字上下无缝滚动
- JS实现的简单拖拽购物车功能示例【附源码下载】
- angularjs实现文字上下无缝滚动特效代码
- 10行原生JS实现文字无缝滚动
- js实现的单行文本不间断无缝滚动效果(荧光屏文字 滚动效果)
- JS实现简单的星期格式转换功能示例
- 简单实现js无缝滚动效果
- JS实现的简单图片切换功能示例【测试可用】
- JS实现的简单四则运算计算器功能示例
- JS实现文字无缝滚动
- 原生JS实现简单的倒计时功能示例
- JS+HTML5 Canvas实现简单的写字板功能示例
- JS实现的点击按钮图片上下滚动效果示例
- js-实现文字无缝滚动(停顿+缓动)
- (20)JS实现简单的图片向左无缝滚动
- js 实现文字无缝滚动(图片无缝滚动) 兼容各种浏览器