Detailed explanation of the steps to implement flying page special effects using JS

This time I will bring you a detailed explanation of the steps to implement flying page special effects with JS. What are theprecautionsfor implementing flying page special effects with JS. The following is a practical case, let’s take a look.

This effect uses a motion function encapsulated by itself; the cleverness of this effect is that it uses an array to store the position information of each li at the beginning, and then when the button (page number) is clicked, the li's The changes in width, height, position and transparency disappear one by one, and then appear upside down one after another; they can be matched with the page number to achieve the effect of page number replacement

         
  
飞页效果
  
 
 
 
 
 
 
 
 
 
 
  

Motion function move. js:

/** * Created by Jason on 2016/11/7. */ function getStyle(obj,sName){ return (obj.currentStyle || getComputedStyle(obj,false))[sName]; } function move(obj,json,options){ var options=options || {}; var duration=options.duration || 1000; var easing=options.easing || 'linear'; var start={}; var dis={}; for(name in json){ start[name]=parseFloat(getStyle(obj,name)); dis[name]=json[name]-start[name]; } //start {width:50,} dis {width:150} //console.log(start,dis); var count=Math.floor(duration/30); var n=0; clearInterval(obj.timer); obj.timer=setInterval(function(){ n++; for(name in json){ switch (easing){ case 'linear': var a=n/count; var cur=start[name]+dis[name]*a; break; case 'ease-in': var a=n/count; var cur=start[name]+dis[name]*a*a*a; break; case 'ease-out': var a=1-n/count; var cur=start[name]+dis[name]*(1-a*a*a); break; } if(name=='opacity'){ obj.style.opacity=cur; }else{ obj.style[name]=cur+'px'; } } if(n==count){ clearInterval(obj.timer); options.complete && options.complete(); } },30); }

The operation effect is as follows:

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website !

Recommended reading:

Detailed explanation of JavaScript callback function usage cases

Detailed explanation of the use of Vue multi-level component provide/inject

The above is the detailed content of Detailed explanation of the steps to implement flying page special effects using JS. For more information, please follow other related articles on the PHP Chinese website!