Of Stack

Native js realizes the seamless scrolling effect of winning information

  • 2021-07-12 05:03:52
  • OfStack

Key points of knowledge

1. Implementation principle: constantly change the top value of the list through timer. To achieve seamless scrolling, it is necessary to copy one information list, and then judge the top critical value of the two lists for initialization. The last thing to pay attention to is to clear the timer to prevent animation accumulation.

2. Attribute methods used: 


setInterval() // Every interval 1 Execute at a fixed time 1 Sub-function, which can be executed indefinitely 
clearInterval() // Clears the specified setInterval
setTimeout() // Pass by 1 Execute at a fixed time 1 Sub-function, which can only execute 1 If you want to go down indefinitely, you need to set it in the function 
clearTimeout() // Clears the specified setTimeout

What remains is a few basic dom operations

Complete code

Note: Because I saw the lottery page of Tmall points, I want to write it myself. After reviewing Tmall code, I see that the principle is to change the value of top in the list, and seamless scrolling is my own thinking. It is estimated that there should be a more efficient method and please ask the great God for 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> Member winning list </p></div>
 <div id="vip">
 <ul id="list" style="top: 0px;">
 <li>m**b<br/> Draw 18 Integral </li>
 <li> Small ** Palace <br/> Draw 28 Integral </li>
 <li> Gold ** Accuse <br/> Draw 8 Integral </li>
 <li> True ** Health <br/> Draw 88 Integral </li>
 <li> Zheng **9<br/> Draw 18 Integral </li>
 <li>l** Beauty <br/> Draw 8 Integral </li>
 </ul> 
 </div>
 <script type="text/javascript">
 // Execute multiple function scenarios immediately after the page loads 
 function addloadEvent(func){
  var oldonload=window.onload;
  if(typeof window.onload !="function"){
   window.onload=func;
  }
  else{
   window.onload=function(){
    if(oldonload){
     oldonload(); 
    }
    func();
   }
  }
 }
 // Execute multiple functions immediately after the page loads. Scenario ends 
 addloadEvent(nes);
 function nes(){
 // Get the list parent container 
 var vip=document.getElementById("vip");
 // Get a list of information 
 var list=document.getElementById("list");
 // Create the 2 List settings 1 Series style id Etc 
 var list1=document.createElement("ul");
  list1.setAttribute("id","list1");
  // The initial position is 300 Exactly in the first 1 Below the list of 
  list1.style.top=300+"px";
  list1.style.position="absolute";
  // Insert a document stream 
  vip.appendChild(list1);
  // Put the first 1 The structural contents of the list are copied to the 2 A 
  list1.innerHTML=list.innerHTML;
 // No. 1 1 List 
 function b(){
  //top Value is the current top Minus 10   
  list.style.top=parseInt(list.style.top)-10+"px";
  // If top Value is -300 Then initialize top
  if(parseInt(list.style.top)==-300){  
  list.style.top=0;
  }
  // Here is the realization of interval scrolling judgment 
  // When top Value divisibility 50( Each li The height of ) Clear the timer when   
  if(parseInt(list.style.top)%50==0){
  clearInterval(time);
  // Then execute again two seconds later time=setInterval
  se=setTimeout(function(){time=setInterval(b,30);},2000);  
  }     
 };
 // Timer 
 time=setInterval(b,30); 
 // No. 1 2 List and number 1 List operations 1 Sample, but the height was modified 
 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); 
 // When the mouse moves into the list,   Clear both timers 
 vip.onmouseover=function(){  
  clearTimeout(se);
  clearTimeout(se1);
  clearInterval(time);
  clearInterval(time1);
 };
 // When the mouse is drawn, it is judged first that if the timer is executing, it will be cleared 
 vip.onmouseout=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>
Related articles: