JS实现简单的文字无缝上下滚动功能示例

2019-11-19 11:17:27

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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.VeVB.COm/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：vue使用websocket的方法实例分析

下一篇：js图片查看器插件用法示例