js仿360开机效果

前端  /  管理员 发布于 4年前   289

本文实例为大家分享了js仿360开机效果的具体代码，供大家参考，具体内容如下

实现效果：

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

实现步骤：

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

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

效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• javascript+jQuery实现360开机时间显示效果
• js回调函数仿360开机