Verwenden Sie js, um den 360-Boot-Effekt zu imitieren-js-Tutorial-php.cn

Verwenden Sie js, um den 360-Boot-Effekt zu imitieren

王林

Freigeben： 2020-04-07 09:24:32

nach vorne

2584 Leute haben es durchsucht

Verwenden Sie js, um den 360-Boot-Effekt zu imitieren

Um den Effekt zu erzielen:

Klicken Sie zum Verlassen auf die Schaltfläche „Bild schließen“, zuerst nach unten und dann nach rechts.

Implementierungsschritte:

1. Bewegungsfunktion kapseln

2. Klicken Sie auf das Bild, um es zu schließen Feld Nach dem Klicken

4. Die Höhe des unteren Bildes beträgt 0, legen Sie eine Beschleunigungsanimation fest

Die Breite des oberen Bildes beträgt 0, legen Sie eine Beschleunigungsanimation fest

Erleichternder Animationscode (mit Rückruffunktion): „

 function getStyle(obj,attr){ //兼容性写法获得样式
        if(window.getComputedStyle){ 
          return window.getComputedStyle(obj, null)[attr];
        }else{
          return obj.currentStyle[attr];
        }
      }
       function animate(obj, json, speed, callback){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
          var flag = true;
          for(var attr in json){
          var current = parseInt(getStyle(obj,attr));
          var step = (json[attr] - current) / 10;
           step = step > 0 ? Math.ceil(step) : Math.floor(step);
           obj.style[attr] = current + step +&#39;px&#39;;
          if(current != json[attr]){
            flag = false;
          }
        }
         if(flag){ 
          clearInterval(obj.timer);
          if(callback && typeof callback == &#39;function&#39;){ //验证callback是否传递，传递的话看是否是函数类型
           callback();
          }
         }
        },speed);
      }

Nach dem Login kopieren

Startbild, das aus zwei Bildern besteht

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .box{
      width: 322px;
      position: fixed;
      bottom:0;
      right:0;
    }
    span{
      position: absolute;
      top:0;
      right:0;
      width:30px;
      height: 20px;
      cursor: pointer;
    }
    .box img{
      vertical-align: top;
    }
  </style>
  <script type="text/javascript" src="函数封装.js"></script>
  <script type="text/javascript">
    function $(id){
      return document.getElementById(id);
    }
    window.onload = function(){
      var span = document.getElementsByTagName(&#39;span&#39;)[0];
      var box = $(&#39;box&#39;);
      var bottom = $(&#39;bt&#39;);
      var top = $(&#39;hd&#39;);
      span.onclick = function(){
        var json = {"height": 0};
        animate(bottom,json,20,function(){
        animate(box,{"width":0},20);
        });
      }
    }
  </script>
</head>
<body>
<div id="box">
  <span></span>
  <div id="hd">
    <img src="images/t.jpg" alt=""/>
  </div>
  <div id="bt">
    <img src="images/b.jpg" alt=""/>
  </div>
</div>
</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Verwenden Sie js, um den 360-Boot-Effekt zu imitieren Verwandte Tutorial-Empfehlungen:

JS-Tutorial

Das obige ist der detaillierte Inhalt vonVerwenden Sie js, um den 360-Boot-Effekt zu imitieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!