这个效果使用了自己封装的一个运动函数；这个效果的巧妙之处在于，在开始用数组存放了每个li的位置信息，然后在点击按钮（页码）的时候让li的宽高位置和透明度发生运动的改变一个一个的消失，然后在消失结束之后，再一个个倒着出现；可以和页码进行匹配，从而实现页码更换的效果
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title> js飞入效果</title> <link rel="stylesheet" href="stylesheets/base.css" rel="external nofollow" > <style> body{ background:#000; } .header{ width: 100%; height: 40px; background:#fff; font:bold 30px/40px '微软雅黑'; text-align:center; } input{ background:#fff; margin-top:5px; width: 50px; height: 20px; font:bold 12px/20px '微软雅黑'; } ul{ width: 360px; height: 360px; margin:50px auto; } ul li{ width: 100px; height: 100px; background:skyblue; float:left; margin:5px; } </style> <script src="move.js"></script> <script> window.onload=function(){ var obtn=document.getelementbyid('btn1'); var oul=document.getelementsbytagname('ul')[0]; var ali=oul.children; //用数组来存放没个li的位置 var arr=[]; //存位置 for(var i=0;i
/** * 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); }
运行效果如下：
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
javascript callback回调函数使用案例详解
vue多级组件provide/inject使用详解
以上就是js实现飞页特效步骤详解的详细内容。