js回调函数仿360开机
(编辑：jimmy 日期: 2024/11/26 浏览：3 次 )
本文实例为大家分享了js回调函数仿360开机的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#demo{
width: 322px; /*不设高，因为下面的盒子消失之后，上面的盒子立刻掉下来*/
position: fixed;
bottom:0;
right:0;
}
span{
position: absolute;
top:0;
right:0;
width:30px;
height: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="demo">
<span id="close"></span> <!--盒子右上角的x号区域-->
<div id="shang">
<img src="/UploadFiles/2021-04-02/t.jpg">
关键代码：
1、demo（最外面整个大盒子）的定位
固定定位，放在页面的右下方
span（关闭按钮）绝对定位在demo的右上方：
#demo{
width:322px;
position : fixed;
bottom:0;
right:0;
}
span{
width:30px;
height: 20px;
position:absolute;
top:0;
right:0;
cursor:pointer;
}
2、防止冒泡，因为span（关闭按钮）的父元素是demo, 所以不能直接写 span.onclick , 这样会发生冒泡，相当于点击了父元素demo, 事件会响应在父元素上，所以应该用span的 id 绑定事件
3、回调函数，点击关闭按钮时，首先下面的盒子 高度变成 0 ，然后整个盒子的宽度 变成 0，依次消失 （所以一开始demo 的高度不应该设置，因为下面的盒子消失之后，上面的盒子会掉下来） 回调函数写的位置：定时器结束的位置
close.onclick=function(){
run(xia, {height:0}, function(){
run(shang,{demo:0}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：js仿360开机效果