javascript实现文字无缝滚动

效果如图：

html：（ 一个div 包裹两个ul ）

 
 

 
1.学会html5 绝对的考高分逆袭（案例）2013-09-18
 
2.tab页面切换效果（案例）2013-10-09
 
3.圆角水晶按钮制作（案例）2013-10-21
 
4.HTML+CSS基础课程(系列)2013-11-01
 
5.分页页码制作（案例）2013-11-06
 
6.导航条菜单的制作（案例）2013-11-08
 
7.信息列表制作(案例)2013-11-15
 
8.下拉菜单制作(案例)2013-11-22
 
9.如何实现“新手引导”效果2013-12-06
 
 

 
 

 

js代码：

window.onload=roll;
function roll(){
 var ul1=document.getElementById("ul1");
 var ul2=document.getElementById("ul2");
 var box=document.getElementById("box");
 ul2.innerHTML=ul1.innerHTML;
 box.scrollTop = 0;
 var timer=setInterval(rollStart,50);
 box.onmouseover=function(){
  clearInterval(timer)
 }
 box.onmouseout=function(){
  timer=setInterval(rollStart,50);
 }


 }
 function rollStart(){
 if (box.scrollTop>=ul1.scrollHeight) {//scrollTop属性既是scroll最上端和box的距离
  box.scrollTop=0;
 }else{
  box.scrollTop++;
 } 
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。