Use js to imitate the 360 boot effect-JS Tutorial-php.cn

Use js to imitate the 360 boot effect

王林

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

forward

2611 people have browsed it

Use js to imitate the 360 boot effect

To achieve the effect:

Click the close picture button to exit first down and then to the right.

Implementation steps:

1. Encapsulate the motion function

2. Set a box for closing on the picture

3. Register a click event for the closing box After clicking

4. The height of the lower picture is 0, set a easing animation

5. The width of the upper picture is 0, set a easing animation

Easing animation code (with callback function): `

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

Copy after login

Boot-up picture, composed of two pictures

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

Copy after login

The effect is as follows:

Use js to imitate the 360 boot effect

Related tutorial recommendations: js tutorial

The above is the detailed content of Use js to imitate the 360 boot effect. For more information, please follow other related articles on the PHP Chinese website!

Use js to imitate the 360 ​​boot effect

Use js to imitate the 360 boot effect