原生js实现中奖信息无间隙滚动效果
知识要点
1.实现原理：通过定时器不断改变列表的top值。而达到无间隙滚动就要对信息列表复制一份，再判断两个列表的top临界值初始化。最后注意的就是防止动画积存需要对定时器进行清除。
2.用到的属性方法：
setInterval()//每隔一定时间执行一次函数，可以无限执行下去 clearInterval()//清除指定的setInterval setTimeout()//经过一定时间执行一次函数，只能执行一次，如果要无限下去需要在函数里自行设置 clearTimeout()//清除指定的setTimeout
剩下的就是一些基础的dom操作
完整代码
注：因为看到了天猫积分的抽奖页面所以想自己写试试，审查天猫代码看到原理是改变列表top值，无缝滚动是自己瞎琢磨的，估计应该有更高效的方法还请大神指教。。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>demo</title>
<style>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:couriernew,courier,monospace;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear:both;float:none;height:0;overflow:hidden;}
.title{background:#D20F25;width:200px;height:40px;color:#fff;line-height:40px;}
.titlep{margin-left:30px;}
#vip{background:#D20F25;width:200px;height:105px;color:#FF92AD;overflow:hidden;position:relative;}
#list{position:absolute;}
#vipli{height:50px;line-height:24px;font-size:12px;margin-left:30px;}
</style>
</head>
<body>
<divclass="title"><p>会员中奖榜</p></div>
<divid="vip">
<ulid="list"style="top:0px;">
<li>m**b<br/>抽中18积分</li>
<li>小**宫<br/>抽中28积分</li>
<li>金**告<br/>抽中8积分</li>
<li>真**生<br/>抽中88积分</li>
<li>郑**9<br/>抽中18积分</li>
<li>l**美<br/>抽中8积分</li>
</ul>
</div>
<scripttype="text/javascript">
//在页面加载完后立即执行多个函数方案
functionaddloadEvent(func){
varoldonload=window.onload;
if(typeofwindow.onload!="function"){
window.onload=func;
}
else{
window.onload=function(){
if(oldonload){
oldonload();
}
func();
}
}
}
//在页面加载完后立即执行多个函数方案结束
addloadEvent(nes);
functionnes(){
//获取列表父容器
varvip=document.getElementById("vip");
//获取信息列表
varlist=document.getElementById("list");
//创建第二个列表设置一系列样式id等
varlist1=document.createElement("ul");
list1.setAttribute("id","list1");
//初始位置为300正好在第一个列表的下面
list1.style.top=300+"px";
list1.style.position="absolute";
//插入文档流
vip.appendChild(list1);
//把第一个列表的结构内容复制给第二个
list1.innerHTML=list.innerHTML;
//第一个列表
functionb(){
//top值为当前的top减10
list.style.top=parseInt(list.style.top)-10+"px";
//如果top值为-300那么初始化top
if(parseInt(list.style.top)==-300){
list.style.top=0;
}
//这里是实现间隔滚动判断
//当top值整除50(每个li的高度)时候清除定时器
if(parseInt(list.style.top)%50==0){
clearInterval(time);
//然后两秒后再次执行time=setInterval
se=setTimeout(function(){time=setInterval(b,30);},2000);
}
};
//定时器
time=setInterval(b,30);
//第二个列表与第一个列表操作一样，只是修改了高度
functionc(){
list1.style.top=parseInt(list1.style.top)-10+"px";
if(parseInt(list1.style.top)==0){
list1.style.top=300+"px";
}
if(parseInt(list1.style.top)%50==0){
clearInterval(time1);
se1=setTimeout(function(){time1=setInterval(c,30);},2000);
}
};
time1=setInterval(c,30);
//鼠标移入列表时清除两个定时器
vip.onmouseover=function(){
clearTimeout(se);
clearTimeout(se1);
clearInterval(time);
clearInterval(time1);
};
//鼠标划出时先判断如果定时器在执行则清除
vip.onmouseout=function(){
if(time&&time1){
clearInterval(time);
clearInterval(time1)
}
if(se&&se1){
clearTimeout(se);
clearTimeout(se1)
}
//再次执行定时器
se=setTimeout(function(){time=setInterval(b,30);},2000);
se1=setTimeout(function(){time1=setInterval(c,30);},2000);
};
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！