幽灵资源网 Design By www.bzswh.com
知识要点
1.实现原理：通过定时器不断改变列表的top值。而达到无间隙滚动就要对信息列表复制一份，再判断两个列表的top临界值初始化。最后注意的就是 防止动画积存需要对定时器进行清除。
2.用到的属性方法：
setInterval() //每隔一定时间执行一次函数，可以无限执行下去 clearInterval() //清除指定的setInterval setTimeout() //经过一定时间执行一次函数，只能执行一次，如果要无限下去需要在函数里自行设置 clearTimeout() //清除指定的setTimeout
剩下的就是一些基础的dom操作
完整代码
注：因为看到了天猫积分的抽奖页面所以想自己写试试，审查天猫代码看到原理是改变列表top值，无缝滚动是自己瞎琢磨的，估计应该有更高效的方法还请大神指教。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-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:courier new,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;}
.title p{margin-left: 30px;}
#vip{background: #D20F25; width: 200px; height: 105px; color: #FF92AD; overflow: hidden; position: relative; }
#list{position: absolute;}
#vip li{ height: 50px; line-height: 24px; font-size: 12px; margin-left: 30px; }
</style>
</head>
<body>
<div class="title"><p>会员中奖榜</p></div>
<div id="vip">
<ul id="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>
<script type="text/javascript">
//在页面加载完后立即执行多个函数方案
function addloadEvent(func){
var oldonload=window.onload;
if(typeof window.onload !="function"){
window.onload=func;
}
else{
window.onload=function(){
if(oldonload){
oldonload();
}
func();
}
}
}
//在页面加载完后立即执行多个函数方案结束
addloadEvent(nes);
function nes(){
//获取列表父容器
var vip=document.getElementById("vip");
//获取信息列表
var list=document.getElementById("list");
//创建第二个列表设置一系列样式id等
var list1=document.createElement("ul");
list1.setAttribute("id","list1");
//初始位置为300正好在第一个列表的下面
list1.style.top=300+"px";
list1.style.position="absolute";
//插入文档流
vip.appendChild(list1);
//把第一个列表的结构内容复制给第二个
list1.innerHTML=list.innerHTML;
//第一个列表
function b(){
//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);
//第二个列表与第一个列表操作一样，只是修改了高度
function c(){
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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
幽灵资源网 Design By www.bzswh.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。