溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下js如何實現(xiàn)中獎信息無間隙滾動效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
知識要點
1.實現(xiàn)原理：通過定時器不斷改變列表的top值。而達到無間隙滾動就要對信息列表復制一份，再判斷兩個列表的top臨界值初始化。最后注意的就是 防止動畫積存需要對定時器進行清除。
2.用到的屬性方法：
setInterval() //每隔一定時間執(zhí)行一次函數(shù)，可以無限執(zhí)行下去 clearInterval() //清除指定的setInterval setTimeout() //經(jīng)過一定時間執(zhí)行一次函數(shù)，只能執(zhí)行一次，如果要無限下去需要在函數(shù)里自行設(shè)置 clearTimeout() //清除指定的setTimeout
剩下的就是一些基礎(chǔ)的dom操作
完整代碼
注：因為看到了天貓積分的抽獎頁面所以想自己寫試試，審查天貓代碼看到原理是改變列表top值，無縫滾動是自己瞎琢磨的，估計應(yīng)該有更高效的方法還請大神指教。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
body,h2,h3,h4,h5,h6,h7,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
h2,h3,h4,h5,h6,h7{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" >
<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">
//在頁面加載完后立即執(zhí)行多個函數(shù)方案
function addloadEvent(func){
var oldonload=window.onload;
if(typeof window.onload !="function"){
window.onload=func;
}
else{
window.onload=function(){
if(oldonload){
oldonload();
}
func();
}
}
}
//在頁面加載完后立即執(zhí)行多個函數(shù)方案結(jié)束
addloadEvent(nes);
function nes(){
//獲取列表父容器
var vip=document.getElementById("vip");
//獲取信息列表
var list=document.getElementById("list");
//創(chuàng)建第二個列表設(shè)置一系列樣式id等
var list1=document.createElement("ul");
list1.setAttribute("id","list1");
//初始位置為300正好在第一個列表的下面
list1.style.top=300+"px";
list1.style.position="absolute";
//插入文檔流
vip.appendChild(list1);
//把第一個列表的結(jié)構(gòu)內(nèi)容復制給第二個
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;
}
//這里是實現(xiàn)間隔滾動判斷
//當top值整除50(每個li的高度)時候清除定時器
if(parseInt(list.style.top)%50==0){
clearInterval(time);
//然后兩秒后再次執(zhí)行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);
};
//鼠標劃出時先判斷如果定時器在執(zhí)行則清除
vip.onmouseout=function(){
if(time&&time1) {
clearInterval(time);
clearInterval(time1)
}
if(se&&se1) {
clearTimeout(se);
clearTimeout(se1)
}
//再次執(zhí)行定時器
se=setTimeout(function(){time=setInterval(b,30);},2000);
se1=setTimeout(function(){time1=setInterval(c,30);},2000);
};
}
</script>
</body>
</html>以上是“js如何實現(xiàn)中獎信息無間隙滾動效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼