js回調(diào)函數(shù)仿360開機
更新時間：2019年12月26日 09:15:21 作者：shanlu
這篇文章主要為大家詳細介紹了js回調(diào)函數(shù)仿360開機，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js回調(diào)函數(shù)仿360開機的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#demo{
width: 322px; /*不設(shè)高，因為下面的盒子消失之后，上面的盒子立刻掉下來*/
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號區(qū)域-->
<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的時候,發(fā)生了事件冒泡，響應(yīng)在了父元素div上，所以對onclick事件的響應(yīng)元素是父元素div
close.onclick=function () {
run(xia,{height:0},function () { //仿360開機：點擊關(guān)閉區(qū)域時，首先下面的盒子高度變?yōu)?，之后整個大盒子寬度變成0，依次消失
run(demo,{width:0}) //這里使用了回調(diào)函數(shù)
})
}
//封裝運動框架基本函數(shù)（多個屬性）
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)); //獲得當(dāng)前屬性
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]) //在遍歷中，只要有一個屬性值沒到達目標(biāo)位置，定時器就不能停
{
flag=false;
}
}
if(flag) //遍歷完了之后，flag是true，所有的值都到達目標(biāo)位置了，停止定時器
{
clearInterval(obj.timer);
if(fn) //回調(diào)函數(shù)，定時器關(guān)閉之后，如果有fn，執(zhí)行fn（）
{
fn();
}
}
},30)
}
//返回當(dāng)前樣式的函數(shù)
function getStyle(obj,attr) //返回誰的，哪個屬性
{
if(obj.currrentStyle)
{
return obj.currentStyle[attr];
}
else{
return window.getComputedStyle(obj,null)[attr]; //w3c瀏覽器
}
}
</script>
關(guān)鍵代碼：
1、demo（最外面整個大盒子）的定位
固定定位，放在頁面的右下方
span（關(guān)閉按鈕）絕對定位在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（關(guān)閉按鈕）的父元素是demo, 所以不能直接寫 span.onclick , 這樣會發(fā)生冒泡，相當(dāng)于點擊了父元素demo, 事件會響應(yīng)在父元素上，所以應(yīng)該用span的 id 綁定事件
3、回調(diào)函數(shù)，點擊關(guān)閉按鈕時，首先下面的盒子 高度變成 0 ，然后整個盒子的寬度 變成 0，依次消失 （所以一開始demo 的高度不應(yīng)該設(shè)置，因為下面的盒子消失之后，上面的盒子會掉下來） 回調(diào)函數(shù)寫的位置：定時器結(jié)束的位置
close.onclick=function(){
run(xia, {height:0}, function(){
run(shang,{demo:0}
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
加入驗證模式 4,同3,但是當(dāng)驗證不通過時，立即停止向下檢查。在模式3下，如果發(fā)生錯誤，會把錯誤記錄，并向下檢查，模式4就不向下檢查了2008-08-08
JS中的算法與數(shù)據(jù)結(jié)構(gòu)之隊列(Queue)實例詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結(jié)構(gòu)之隊列(Queue),結(jié)合實例形式詳細分析了javascript中隊列的概念、原理、定義及常見操作技巧,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了js實現(xiàn)自定義滾動條的示例，幫助大家制作JS特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下2020-10-10
詳解JavaScript 新語法之Class 的私有屬性與私有方法
這篇文章主要介紹了JavaScript 新語法之Class 的私有屬性與私有方法 ,本文通過實例代碼相結(jié)合的形式給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要介紹了JavaScript代碼簡化技巧實例解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
Javascript Event事件中IE與標(biāo)準(zhǔn)DOM的比較
說是IE與DOM的比較，其實還是瀏覽器之間的比較，眾多的瀏覽器中，IE獨樹一幟，并且占有大部分用戶市場，后來的標(biāo)準(zhǔn)DOM雖然不少優(yōu)點之處，但畢竟一般用戶不關(guān)心也不知道這些，代碼編寫過程中，往往需要兼顧多個瀏覽器。2010-04-04
在本篇文章里小編給大家整理的是關(guān)于JS如何阻止事件冒泡的相關(guān)知識點內(nèi)容，有需要的朋友們可以學(xué)習(xí)下。2019-08-08
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單表單驗證案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
Js注冊協(xié)議倒計時的小例子，需要的朋友可以參考一下2013-06-06
JS使用Date對象實時顯示當(dāng)前系統(tǒng)時間簡單示例
這篇文章主要介紹了JS使用Date對象實時顯示當(dāng)前系統(tǒng)時間,涉及javascript基于定時器動態(tài)操作Date對象相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-08-08