微客导航 » 文章资讯 » js仿360开机效果

js仿360开机效果

2023-08-03 23:09:04 334

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

实现效果：

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

实现步骤：

1.封装运动函数
2.给图片上的关闭设置一个盒子
3.给关闭盒子注册点击事件点击后
4.下面图片高度为0，设置一个缓动动画
5.上面图片宽度为0，设置一个缓动动画

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

functiongetStyle(obj,attr){//兼容性写法获得样式
if(window.getComputedStyle){
returnwindow.getComputedStyle(obj,null)[attr];
}else{
returnobj.currentStyle[attr];
}
}
functionanimate(obj,json,speed,callback){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
varflag=true;
for(varattrinjson){
varcurrent=parseInt(getStyle(obj,attr));
varstep=(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&&typeofcallback=='function'){//验证callback是否传递，传递的话看是否是函数类型
callback();
}
}
},speed);
}

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









function$(id){
returndocument.getElementById(id);
}
window.onload=function(){
varspan=document.getElementsByTagName('span')[0];
varbox=$('box');
varbottom=$('bt');
vartop=$('hd');
span.onclick=function(){
varjson={"height":0};
animate(bottom,json,20,function(){
animate(box,{"width":0},20);
});
}
}

效果：

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

js仿360开机效果

热门推荐

随机推荐