原生js實(shí)現(xiàn)中獎(jiǎng)信息無(wú)間隙滾動(dòng)效果
知識(shí)要點(diǎn)
1.實(shí)現(xiàn)原理:通過(guò)定時(shí)器不斷改變列表的top值。而達(dá)到無(wú)間隙滾動(dòng)就要對(duì)信息列表復(fù)制一份,再判斷兩個(gè)列表的top臨界值初始化。最后注意的就是 防止動(dòng)畫(huà)積存需要對(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è)面所以想自己寫(xiě)試試,審查天貓代碼看到原理是改變列表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í)也希望多多支持腳本之家!
相關(guān)文章
javascript 樹(shù)形導(dǎo)航菜單實(shí)例代碼
本文章來(lái)給大家提供一款適用于網(wǎng)站后臺(tái)的使用的javascript 樹(shù)形導(dǎo)航菜單特效代碼,有需要了解的同學(xué)可以參考一下2013-08-08javascript寫(xiě)的一個(gè)模擬閱讀小說(shuō)的程序
這篇文章主要介紹了用javascript寫(xiě)了一個(gè)模擬閱讀小說(shuō)的程序,需要的朋友可以參考下2014-04-04JavaScript提高性能知識(shí)點(diǎn)匯總
這篇文章主要為大家介紹了JavaScript幾個(gè)提高性能知識(shí)點(diǎn),感興趣的小伙伴們可以參考一下2016-01-01javascript實(shí)現(xiàn)在某個(gè)元素上阻止鼠標(biāo)右鍵事件的方法和實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)在某個(gè)元素上阻止鼠標(biāo)右鍵事件的方法和實(shí)例,需要的朋友可以參考下2014-08-08JS中showModalDialog關(guān)閉子窗口刷新主窗口用法詳解
這篇文章主要介紹了JS中showModalDialog關(guān)閉子窗口刷新主窗口用法,結(jié)合具體實(shí)例形式較為詳細(xì)的分析了showModalDialog常見(jiàn)用法與相關(guān)使用技巧,需要的朋友可以參考下2017-03-03JavaScript 用cloneNode方法克隆節(jié)點(diǎn)的代碼
很多時(shí)候我們需要通過(guò)HTML DOM 的方式,用JavaScript 動(dòng)態(tài)生成很多相同的節(jié)點(diǎn),包括其子節(jié)點(diǎn)2012-10-10IE不出現(xiàn)Flash激活框的小發(fā)現(xiàn)的js實(shí)現(xiàn)方法
IE不出現(xiàn)Flash激活框的小發(fā)現(xiàn)的js實(shí)現(xiàn)方法...2007-09-09JavaScript實(shí)現(xiàn)垂直向上無(wú)縫滾動(dòng)特效代碼
下面小編就為大家?guī)?lái)一篇JavaScript實(shí)現(xiàn)垂直向上無(wú)縫滾動(dòng)特效代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11