本文详解如何使用JavaScript回调函数实现仿360安全卫士的开机弹窗效果。通过固定定位与绝对定位结合，利用定时器控制高度与宽度的依次归零动画。重点解析如何防止关闭按钮点击事件冒泡，并在动画结束后执行回调函数以完成元素销毁，提供完整代码参考。
JavaScript实现仿360开机弹窗动画教程
本文分享了一段使用JavaScript回调函数模拟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="t.jpg" alt=""/>
</div>
<div id="xia">
<img src="b.jpg" alt=""/>
</div>
</div>
</body>
</html>
<script>
function $id(id){return document.getElementById(id);}
var demo=$id("demo");
var shang=$id("shang");
var xia=$id("xia");
var close=$id("close"); //注意：不能直接用span.onclick，因为span是div的子元素,点击span的时候,发生了事件冒泡，响应在了父元素div上，所以对onclick事件的响应元素是父元素div
close.onclick=function () {
run(xia,{height:0},function () { //仿360开机：点击关闭区域时，首先下面的盒子高度变为0，之后整个大盒子宽度变成0，依次消失
run(demo,{width:0}) //这里使用了回调函数
})
}
//封装运动框架基本函数（多个属性）
function run(obj,json,fn) {
clearInterval(obj.timer);
obj.timer=setInterval(function () {
var flag=true; //用来判断定时器是否停止，一定写在遍历的外面，否则一遍历就true
for( attr in json)
{
var cstyle=parseInt(getStyle(obj,attr)); //获得当前属性
var step=(json[attr]-cstyle)/10; //计算步长
step=step>0 ? Math.ceil(step) : Math.floor(step);
obj.style[attr]=cstyle+step+"px";
if(cstyle!=json[attr]) //在遍历中，只要有一个属性值没到达目标位置，定时器就不能停
{
flag=false;
}
}
if(flag) //遍历完了之后，flag是true，所有的值都到达目标位置了，停止定时器
{
clearInterval(obj.timer);
if(fn) //回调函数，定时器关闭之后，如果有fn，执行fn（）
{
fn();
}
}
},30)
}
//返回当前样式的函数
function getStyle(obj,attr) //返回谁的，哪个属性
{
if(obj.currrentStyle)
{
return obj.currentStyle[attr];
}
else{
return window.getComputedStyle(obj,null)[attr]; //w3c浏览器
}
}
</script>
实现该效果的核心逻辑如下。
容器定位与布局设置
首先处理最外层容器（demo）的定位方式。
将其设置为固定定位（fixed），并放置在页面的右下角区域。
接着处理关闭按钮（span）的定位，使其绝对定位（absolute）于demo容器的右上角。
#demo{
width:322px;
position : fixed;
bottom:0;
right:0;
}
span{
width:30px;
height: 20px;
position:absolute;
top:0;
right:0;
cursor:pointer;
}事件冒泡处理机制
其次，需要解决事件冒泡问题。由于关闭按钮span位于demo内部，若直接绑定span.onclick可能会触发父元素demo的点击事件。因此，应通过span的id属性直接绑定点击事件处理函数，以阻断事件向父元素冒泡。
回调函数与动画流程控制
最后，利用回调函数控制动画流程。点击关闭按钮时，先执行内部子元素高度变为0的动画，待其结束后，再执行整个demo容器宽度变为0的动画，从而实现依次消失的效果。需注意，初始状态下不应设置demo的高度，否则子元素消失后父容器无法自动收缩。回调函数的注册位置应位于定时器动画结束的回调中。
close.onclick=function(){
run(xia, {height:0}, function(){
run(shang,{demo:0}
}
}以上内容为本文的全部代码解析，希望能为读者的学习提供有益帮助，欢迎继续支持本站获取更多技术分享。