快捷導(dǎo)航

原生js實(shí)現(xiàn)中獎(jiǎng)信息無(wú)間隙滾動(dòng)效果

更新時(shí)間：2017年01月18日 16:31:21 作者：夏天不做夢(mèng)

本文主要分享了原生js實(shí)現(xiàn)中獎(jiǎng)信息無(wú)間隙滾動(dòng)效果的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧

知識(shí)要點(diǎn)

1.實(shí)現(xiàn)原理：通過(guò)定時(shí)器不斷改變列表的top值。而達(dá)到無(wú)間隙滾動(dòng)就要對(duì)信息列表復(fù)制一份，再判斷兩個(gè)列表的top臨界值初始化。最后注意的就是防止動(dòng)畫積存需要對(duì)定時(shí)器進(jìn)行清除。

2.用到的屬性方法：

setInterval() //每隔一定時(shí)間執(zhí)行一次函數(shù)，可以無(wú)限執(zhí)行下去
clearInterval() //清除指定的setInterval
setTimeout() //經(jīng)過(guò)一定時(shí)間執(zhí)行一次函數(shù)，只能執(zhí)行一次，如果要無(wú)限下去需要在函數(shù)里自行設(shè)置
clearTimeout() //清除指定的setTimeout

剩下的就是一些基礎(chǔ)的dom操作

完整代碼

注：因?yàn)榭吹搅颂熵埛e分的抽獎(jiǎng)頁(yè)面所以想自己寫試試，審查天貓代碼看到原理是改變列表top值，無(wú)縫滾動(dòng)是自己瞎琢磨的，估計(jì)應(yīng)該有更高效的方法還請(qǐng)大神指教。。

<!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>會(huì)員中獎(jiǎng)榜</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">
 //在頁(yè)面加載完后立即執(zhí)行多個(gè)函數(shù)方案
 function addloadEvent(func){
  var oldonload=window.onload;
  if(typeof window.onload !="function"){
   window.onload=func;
  }
  else{
   window.onload=function(){
    if(oldonload){
     oldonload(); 
    }
    func();
   }
  }
 }
 //在頁(yè)面加載完后立即執(zhí)行多個(gè)函數(shù)方案結(jié)束
 addloadEvent(nes);
 function nes(){
 //獲取列表父容器
 var vip=document.getElementById("vip");
 //獲取信息列表
 var list=document.getElementById("list");
 //創(chuàng)建第二個(gè)列表設(shè)置一系列樣式id等
 var list1=document.createElement("ul");
  list1.setAttribute("id","list1");
  //初始位置為300正好在第一個(gè)列表的下面
  list1.style.top=300+"px";
  list1.style.position="absolute";
  //插入文檔流
  vip.appendChild(list1);
  //把第一個(gè)列表的結(jié)構(gòu)內(nèi)容復(fù)制給第二個(gè)
  list1.innerHTML=list.innerHTML;
 //第一個(gè)列表
 function b(){
  //top值為當(dāng)前的top減10   
  list.style.top=parseInt(list.style.top)-10+"px";
  //如果top值為-300那么初始化top
  if(parseInt(list.style.top)==-300){  
  list.style.top=0;
  }
  //這里是實(shí)現(xiàn)間隔滾動(dòng)判斷
  //當(dāng)top值整除50(每個(gè)li的高度)時(shí)候清除定時(shí)器  
  if(parseInt(list.style.top)%50==0){
  clearInterval(time);
  //然后兩秒后再次執(zhí)行time=setInterval
  se=setTimeout(function(){time=setInterval(b,30);},2000);  
  }     
 };
 //定時(shí)器
 time=setInterval(b,30); 
 //第二個(gè)列表與第一個(gè)列表操作一樣，只是修改了高度
 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); 
 //鼠標(biāo)移入列表時(shí) 清除兩個(gè)定時(shí)器
 vip.onmouseover=function(){  
  clearTimeout(se);
  clearTimeout(se1);
  clearInterval(time);
  clearInterval(time1);
 };
 //鼠標(biāo)劃出時(shí)先判斷如果定時(shí)器在執(zhí)行則清除
 vip.onmouseout=function(){
  if(time&&time1) {
  clearInterval(time);
  clearInterval(time1)
  }
  if(se&&se1) {
  clearTimeout(se);
  clearTimeout(se1)
  }
  //再次執(zhí)行定時(shí)器
  se=setTimeout(function(){time=setInterval(b,30);},2000); 
  se1=setTimeout(function(){time1=setInterval(c,30);},2000); 
 }; 
 } 
 </script>
</body> 
</html>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: