JS实现简单的文字无缝上下滚动功能示例
网络编程 2021-07-04 15:51www.168986.cn编程入门
这篇文章主要介绍了JS实现简单的文字无缝上下滚动功能,结合实例形式分析了JavaScript结合时间函数动态操作页面元素属性变换实现文字滚动功能相关操作技巧,需要的朋友可以参考下
本文实例讲述了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代码运行工具:测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题:《》、《》、《》、《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。
上一篇:vue使用websocket的方法实例分析
下一篇:js图片查看器插件用法示例
编程语言
- socket网络编程 socket网络编程Socket基础
- 少儿编程培训班 少儿编程培训班教学方法
- linux系统编程:Linux系统编程多线程基础
- unix环境高级编程 首发于 UNIX环境高级编程学习之
- 学编程学哪一种比较好 初学者哪种编程语言比较
- 学PLC编程学费多少
- 计算机编程入门 学计算机编程入门的初学指南
- 世界编程语言排行榜
- vba编程培训:Excel VBA编程培训初学者教程
- 少儿编程课程:少儿编程学什么及各年龄段如何
- 游戏编程入门:少儿游戏编程入门的技巧
- 学编程哪个培训机构好 编程培训机构哪个好
- 编程机器人加盟 机器人编程加盟哪家好
- 在线少儿编程机构排名
- 电脑编程入门自学
- 服务器系统下载:服务器系统的安装