利用js模仿360开机效果

前端  /  管理员 发布于 7年前   189

实现效果：

点击关闭图片按钮先往下退出再往右退出。

实现步骤：

1、封装运动函数

2、给图片上的关闭设置一个盒子

3、给关闭盒子注册点击事件点击后

4、下面图片高度为0，设置一个缓动动画

5、上面图片宽度为0，设置一个缓动动画

缓动动画代码（带回调函数）：`

 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 +'px';          if(current != json[attr]){flag = false;          }        }         if(flag){           clearInterval(obj.timer);          if(callback && typeof callback == 'function'){ //验证callback是否传递，传递的话看是否是函数类型           callback();          }         }        },speed);      }

开机图片，的由两个图片中组成

<!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('span')[0];      var box = $('box');      var bottom = $('bt');      var top = $('hd');      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>

效果如下：

f533d46372b21d2c4b5fa96a6b11e65.png

相关教程推荐：js教程

以上就是利用js模仿360开机效果的详细内容，更多请关注其它相关文章！


  • 上一条：
    js数组的函数用法详解
    下一条：
    css如何实现下划线滑动效果

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客