Utilisez js pour imiter l'effet de démarrage 360-js tutoriel-php.cn

Utilisez js pour imiter l'effet de démarrage 360

王林

Libérer： 2020-04-07 09:24:32

avant

2583 Les gens l'ont consulté

Utilisez js pour imiter l'effet de démarrage 360

Pour obtenir l'effet :

Cliquez sur le bouton de fermeture de l'image pour quitter d'abord en bas, puis vers la droite.

Étapes de mise en œuvre :

1. Encapsuler la fonction de mouvement

2. Définir une case pour la fermeture sur l'image

3. Enregistrez l'événement de clic pour la fermeture. box Après avoir cliqué

4. La hauteur de l'image inférieure est 0, définissez une animation d'assouplissement

5 La largeur de l'image supérieure est 0, définissez une animation d'assouplissement

Code d'animation simplifié (Avec fonction de rappel) : `

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

Copier après la connexion

Image de démarrage, composée de deux images

<!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>

Copier après la connexion

L'effet est le suivant :

Utilisez js pour imiter leffet de démarrage 360