知識要點
1.實現原理：通過定時器不斷改變列表的top值。而達到無間隙滾動就要對信息列表復制一份，再判斷兩個列表的top臨界值初始化。最后注意的就是 防止動畫積存需要對定時器進行清除。
2.用到的屬性方法：
setInterval() //每隔一定時間執行一次函數，可以無限執行下去clearInterval() //清除指定的setIntervalsetTimeout() //經過一定時間執行一次函數，只能執行一次，如果要無限下去需要在函數里自行設置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> 以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
