How to use JS to implement flying page special effects that can be used for page number replacement

This time I will show you how to use JS to implement flying page special effects that can be used for page number replacement, and use JS to implement flying page special effects that can be used for page number replacement. What are the precautions?The following is a practical case, let’s take a look 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

nbsp;html>


  <meta>
  <title> JS飞入效果</title>
  <link>
  <style>
    body{
      background:#000;
    }
    .header{
      width: 100%;
      height: 40px;
      background:#fff;
      font:bold 30px/40px &#39;微软雅黑&#39;;
      text-align:center;
    }
    input{
      background:#fff;
      margin-top:5px;
      width: 50px;
      height: 20px;
      font:bold 12px/20px &#39;微软雅黑&#39;;
    }
    ul{
      width: 360px;
      height: 360px;
      margin:50px auto;
    }
    ul li{
      width: 100px;
      height: 100px;
      background:skyblue;
      float:left;
      margin:5px;
    }
  </style>
  <script></script>
  <script>
    window.onload=function(){
      var oBtn=document.getElementById(&#39;btn1&#39;);
      var oUl=document.getElementsByTagName(&#39;ul&#39;)[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=&#39;absolute&#39;;
        aLi[i].style.left=arr[i].left+&#39;px&#39;;
        aLi[i].style.top=arr[i].top+&#39;px&#39;;
        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},{&#39;duration&#39;:200,&#39;complete&#39;: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},{&#39;duration&#39;:200,&#39;complete&#39;:function(){
            if(iNow==0){
              clearInterval(timer);
            }
          }});
        },220);
      }
    };
  </script>


  <p>飞页效果</p>
  <input>
  

    
•     
•     
•     
•     
•     
•     
•     
•     
•   

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:

How to use Vue to integrate AdminLTE template

How to use vue-cli to quickly build a project

The above is the detailed content of How to use JS to implement flying page special effects that can be used for page number replacement. For more information, please follow other related articles on the PHP Chinese website!