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

 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>

 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>