当前位置:  首页  >  前端开发  >  JavaScript

利用js模仿360开机效果

本文为大家介绍了如何利用js模仿360开机效果,具有一定的参考价值,希望可以帮助到大家。实现效果:点击关闭图片按钮后,先往下退出再往右退出。

实现效果:

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

实现步骤:

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

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

          

效果如下:

相关教程推荐:js教程

以上就是利用js模仿360开机效果的详细内容,更多请关注 第一PHP社区 其它相关文章!

内容推荐:免费高清PNG素材下载
吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有 京ICP备19059560号-4