无间歇文字滚动_ 原生js实现新闻无间歇性上下滚动

这篇文章主要介绍使用js实现文字无间歇性上下滚动，一些网站的公告，新闻列表使用的比较多，感兴趣的小伙伴们可以参考一下 ，代码实现如下。

html+css部分：

 <style>
 #moocbox{
 width: 600px;
 height: 22px;
 border: 1px solid #ccc;
 margin:60px auto;
 overflow: hidden;
 }
 .con{
 padding-left: 24px;
 }
 .con li{
 list-style: decimal;
 }
 .con li a{
 font-size: 14px;
 }
 .con li a:hover{
 color: red;
 }
 </style>
 <div id="moocbox">
 <ul id="con1" class="con">
 <li><a href="#">第一张</a></li>
 <li><a href="#">第二张</a></li>
 <li><a href="#">第三张</a></li>
 <li><a href="#">第四张</a></li>
 <li><a href="#">第五张</a></li>
 <li><a href="#">第六张</a></li>
 <li><a href="#">第七张</a></li>
 <li><a href="#">第八张</a></li>
 <li><a href="#">第九张</a></li>
 <li><a href="#">第十张</a></li>
 <li><a href="#">第十一张</a></li>
 </ul>
 <ul id="con2" class="con"></ul>
 </div>

设计坞https://www.wode007.com/sites/73738.html

js部分：

 <script>
 //获取外框
 var area = document.getElementById("moocbox");
 //获取con1
 var con1 = document.getElementById("con1");
 //获取con2
 var con2=document.getElementById("con2");
 //con2克隆con1
 con2.innerHTML=con1.innerHTML;
 //设置滚动的初始值为0
 area.scrollTop=;
 //创建向上滚动的函数
 function scrollUp(){
 area.scrollTop++;
 //判断
 if(area.scrollTop >= con1.offsetHeight){
 area.scrollTop = ;
 }else{
 area.scrollTop++;
 }
 }
 //将滑动的速度保存为一个变量
 var speed = ;
 //使用定时器，速度为50
 var myScroll = setInterval("scrollUp()",speed);
 //鼠标移入清除定时器
 area.onmouseover = function(){
 clearInterval(myScroll);
 }
 //鼠标移出，添加定时器
 area.onmouseout = function(){
 myScroll = setInterval("scrollUp()",speed);
 }
 </script>