純JS實現可用于頁碼更換的飛頁特效示例

2019-11-19 13:48:43

字體：大中小

來源：轉載

供稿：網友

本文實例講述了純JS實現可用于頁碼更換的飛頁特效。分享給大家供大家參考，具體如下：

這個效果使用了自己封裝的一個運動函數；這個效果的巧妙之處在于，在開始用數組存放了每個li的位置信息，然后在點擊按鈕（頁碼）的時候讓li的寬高位置和透明度發生運動的改變一個一個的消失，然后在消失結束之后，再一個個倒著出現；可以和頁碼進行匹配，從而實現頁碼更換的效果

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>www.survivalescaperooms.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);}

運行效果如下：