suchen

Heim >Web-Frontend >js-Tutorial >So implementieren Sie mit JS fliegende Seiten-Spezialeffekte, die zum Ersetzen von Seitenzahlen verwendet werden können

So implementieren Sie mit JS fliegende Seiten-Spezialeffekte, die zum Ersetzen von Seitenzahlen verwendet werden können

php中世界最好的语言
php中世界最好的语言Original
2018-05-28 14:57:581418Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie JS verwenden, um den Flying-Page-Spezialeffekt zu implementieren, der zum Ersetzen von Seitenzahlen verwendet werden kann. Welche Vorsichtsmaßnahmen gibt es bei der Verwendung von JS, um den Flying-Page-Spezialeffekt zu implementieren? Kann zum Ersetzen von Seitenzahlen verwendet werden. Das Folgende ist ein praktischer Fall. Lassen Sie uns einen Blick darauf werfen.

Dieser Effekt verwendet eine selbst gekapselte Bewegungsfunktion. Der Clou dieses Effekts besteht darin, dass er ein Array verwendet, um die Positionsinformationen jedes Li zu Beginn und dann beim Klicken auf die Schaltfläche (Seitennummer) zu speichern , die li's Die Änderungen in Breite, Höhe, Position und Transparenz verschwinden nacheinander und werden dann nacheinander auf den Kopf gestellt. Sie können mit der Seitenzahl abgeglichen werden, um den Effekt der Seitenzahlersetzung zu erzielen 

<!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<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>
  <p class="header">飞页效果</p>
  <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>

Bewegungsfunktion 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);
}

Der Operationseffekt ist wie folgt:

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie Vue, um die AdminLTE-Vorlage zu integrieren

So verwenden Sie vue-cli, um schnell ein Projekt zu erstellen

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit JS fliegende Seiten-Spezialeffekte, die zum Ersetzen von Seitenzahlen verwendet werden können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie Vue+Jwt+SpringBoot+Ldap, um die Anmeldeauthentifizierung abzuschließenNächster Artikel：So verwenden Sie Vue+Jwt+SpringBoot+Ldap, um die Anmeldeauthentifizierung abzuschließen

In Verbindung stehende Artikel

Mehr sehen