Key points of knowledge
1. Implementation principle: Continuously change the top value of the list through the timer. To achieve gapless scrolling, you need to copy a copy of the information list and then judge the top critical value of the two lists to be initialized. The last thing to note is to prevent animation accumulation from being cleared.
2. The attribute method used:
setInterval() //Execute the function every certain time, and it can be executed infinitelyclearInterval() //Clear the specified setIntervalsetTimeout() //A function can be executed once after a certain period of time. If you want to continue infinitely, you need to set it yourself in the functionclearTimeout() //Clear the specified setTimeout
What's left is some basic dom operations
Complete code
Note: I saw the lottery page of Tmall points, so I want to write it myself. When I review the Tmall code, I see that the principle is to change the top value of the list. I think seamless scrolling is a blind eye. I guess there should be a more efficient method. Please give me advice. .
<!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>Membership Winning List</p></div>
<div >
<ul style="top: 0px;">
<li>m**b<br/>Draw18integral</li>
<li>Small**palace<br/>Draw28integral</li>
<li>gold**tell<br/>Draw8integral</li>
<li>real**born<br/>Draw88integral</li>
<li>Zheng**9<br/>Draw18integral</li>
<li>l**beautiful<br/>Draw8integral</li>
</ul>
</div>
<script type="text/javascript">
//Execute multiple function schemes immediately after the page is loaded function addloadEvent(func){
var oldonload=;
if(typeof !="function"){
=func;
}
else{
=function(){
if(oldonload){
oldonload();
}
func();
}
}
}
//Execute multiple function schemes immediately after the page is loaded addloadEvent(nes);
function nes(){
//Get the list parent container var vip=("vip");
//Get the information list var list=("list");
//Create a second list and set a series of style ids, etc. var list1=("ul");
("id","list1");
//The initial position is 300 exactly below the first list =300+"px";
="absolute";
//Insert the document stream (list1);
//Copy the structure content of the first list to the second one =;
//The first list function b(){
//The top value is minus 10 for the current top =parseInt()-10+"px";
//If the top value is -300, then initialize the top if(parseInt()==-300){
=0;
}
//This is to realize interval scrolling judgment //Clear the timer when the top value is divided by 50 (the height of each li). if(parseInt()%50==0){
clearInterval(time);
// Then execute time=setInterval again after two seconds se=setTimeout(function(){time=setInterval(b,30);},2000);
}
};
//Timer time=setInterval(b,30);
//The second list is the same as the first list operation, but the height is modified function c(){
=parseInt()-10+"px";
if(parseInt()==0){
=300+"px";
}
if(parseInt()%50==0){
clearInterval(time1);
se1=setTimeout(function(){time1=setInterval(c,30);},2000);
}
};
time1=setInterval(c,30);
//When the mouse is moved into the list, clear two timers =function(){
clearTimeout(se);
clearTimeout(se1);
clearInterval(time);
clearInterval(time1);
};
// When the mouse is struck out, first determine if the timer is executing, clear it =function(){
if(time&&time1) {
clearInterval(time);
clearInterval(time1)
}
if(se&&se1) {
clearTimeout(se);
clearTimeout(se1)
}
//Execute the timer again se=setTimeout(function(){time=setInterval(b,30);},2000);
se1=setTimeout(function(){time1=setInterval(c,30);},2000);
};
}
</script>
</body>
</html>
The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!