知识要点
1. 实现原理: 通过定时器不断改变列表的 top 值. 而达到无间隙滚动就要对信息列表复制一份,
再判断两个列表的 top 临界值初始化. 最后注意的就是 防止动画积存需要对定时器进行清除.
2. 用到的属性方法:
- setInterval() // 每隔一定时间执行一次函数, 可以无限执行下去
- clearInterval() // 清除指定的 setInterval
- setTimeout() // 经过一定时间执行一次函数, 只能执行一次, 如果要无限下去需要在函数里自行设置
- clearTimeout() // 清除指定的 setTimeout
剩下的就是一些基础的 dom 操作
完整代码
注: 因为看到了天猫积分的抽奖页面所以想自己写试试, 审查天猫代码看到原理是改变列表 top 值, 无缝滚动是自己瞎琢磨的, 估计应该有更高效的方法还请大神指教..
html 代码
- <!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>
来源: http://www.qdfuns.com/article/36841/7cf28eda5fbbf162bb294524ed072d66.html