纯JS实现可用于页码更换的飞页特效示例

2019-11-19 13:48:43

字体：大中小

来源：转载

供稿：网友

本文实例讲述了纯JS实现可用于页码更换的飞页特效。分享给大家供大家参考，具体如下：

这个效果使用了自己封装的一个运动函数；这个效果的巧妙之处在于，在开始用数组存放了每个li的位置信息，然后在点击按钮（页码）的时候让li的宽高位置和透明度发生运动的改变一个一个的消失，然后在消失结束之后，再一个个倒着出现；可以和页码进行匹配，从而实现页码更换的效果

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>www.VeVB.COm 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<aLi.length;i++) {        arr[i] = {        left:aLi[i].offsetLeft,        top:aLi[i].offsetTop        };      }      //给目前的li定位      for(var i=0;i<arr.length;i++){        aLi[i].style.position='absolute';        aLi[i].style.left=arr[i].left+'px';        aLi[i].style.top=arr[i].top+'px';        aLi[i].style.margin=0;      }      //当点击的时候开定时器，让li一个一个的走      var iNow=0;      var timer=null;      var bReady=false;      oBtn.onclick=function(){        if(bReady){return;}        bReady=true;        timer=setInterval(function(){          move(aLi[iNow],{left:0,top:0,height:0,width:0,opacity:0},{'duration':200,'complete':function(){            if(iNow==arr.length-1){              clearInterval(timer);              back();              bReady=false;            }            iNow++;          }});        },220);      };      function back(){        timer=setInterval(function(){          iNow--;          move(aLi[iNow],{left:arr[iNow].left,top:arr[iNow].top,height:100,width:100,opacity:1},{'duration':200,'complete':function(){            if(iNow==0){              clearInterval(timer);            }          }});        },220);      }    };  </script></head><body>  <div class="header">飞页效果</div>  <input type="button" value="走你" id="btn1">  <ul>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>  </ul></body></html>

运动函数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);}

运行效果如下：