无间歇文字滚动_ 原生js实现新闻无间歇性上下滚动
这篇文章主要介绍使用js实现文字无间歇性上下滚动，一些网站的公告，新闻列表使用的比较多，感兴趣的小伙伴们可以参考一下 ，代码实现如下。
html+css部分：
1 <style> 2 #moocbox{ 3 width: 600px; 4 height: 22px; 5 border: 1px solid #ccc; 6 margin:60px auto; 7 overflow: hidden; 8 } 9 .con{ 10 padding-left: 24px; 11 } 12 .con li{ 13 list-style: decimal; 14 } 15 .con li a{ 16 font-size: 14px; 17 } 18 .con li a:hover{ 19 color: red; 20 } 21 </style> 22 <div id="moocbox"> 23 <ul id="con1" class="con"> 24 <li><a href="#">第一张</a></li> 25 <li><a href="#">第二张</a></li> 26 <li><a href="#">第三张</a></li> 27 <li><a href="#">第四张</a></li> 28 <li><a href="#">第五张</a></li> 29 <li><a href="#">第六张</a></li> 30 <li><a href="#">第七张</a></li> 31 <li><a href="#">第八张</a></li> 32 <li><a href="#">第九张</a></li> 33 <li><a href="#">第十张</a></li> 34 <li><a href="#">第十一张</a></li> 35 </ul> 36 <ul id="con2" class="con"></ul> 37 </div>
设计坞https://www.wode007.com/sites/73738.html
js部分：
1 <script> 2 //获取外框 3 var area = document.getElementById("moocbox"); 4 //获取con1 5 var con1 = document.getElementById("con1"); 6 //获取con2 7 var con2=document.getElementById("con2"); 8 //con2克隆con1 9 con2.innerHTML=con1.innerHTML; 10 //设置滚动的初始值为0 11 area.scrollTop=0; 12 //创建向上滚动的函数 13 function scrollUp(){ 14 area.scrollTop++; 15 //判断 16 if(area.scrollTop >= con1.offsetHeight){ 17 area.scrollTop = 0; 18 }else{ 19 area.scrollTop++; 20 } 21 } 22 //将滑动的速度保存为一个变量 23 var speed = 200; 24 //使用定时器，速度为50 25 var myScroll = setInterval("scrollUp()",speed); 26 //鼠标移入清除定时器 27 area.onmouseover = function(){ 28 clearInterval(myScroll); 29 } 30 //鼠标移出，添加定时器 31 area.onmouseout = function(){ 32 myScroll = setInterval("scrollUp()",speed); 33 } 34 </script>
