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); }
上一条:
JS 数组基本用法入门示例解析
下一条:
Ajax返回数据之前的loading等待效果
122 在
学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号