js回調(diào)函數(shù)仿360開(kāi)機(jī)
更新時(shí)間：2019年12月26日 09:15:21 作者：shanlu
這篇文章主要為大家詳細(xì)介紹了js回調(diào)函數(shù)仿360開(kāi)機(jī)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js回調(diào)函數(shù)仿360開(kāi)機(jī)的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#demo{
width: 322px; /*不設(shè)高，因?yàn)橄旅娴暮凶酉е?，上面的盒子立刻掉下?lái)*/
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號(hào)區(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，因?yàn)閟pan是div的子元素,點(diǎn)擊span的時(shí)候,發(fā)生了事件冒泡，響應(yīng)在了父元素div上，所以對(duì)onclick事件的響應(yīng)元素是父元素div
close.onclick=function () {
run(xia,{height:0},function () { //仿360開(kāi)機(jī)：點(diǎn)擊關(guān)閉區(qū)域時(shí)，首先下面的盒子高度變?yōu)?，之后整個(gè)大盒子寬度變成0，依次消失
run(demo,{width:0}) //這里使用了回調(diào)函數(shù)
})
}
//封裝運(yùn)動(dòng)框架基本函數(shù)（多個(gè)屬性）
function run(obj,json,fn) {
clearInterval(obj.timer);
obj.timer=setInterval(function () {
var flag=true; //用來(lái)判斷定時(shí)器是否停止，一定寫在遍歷的外面，否則一遍歷就true
for( attr in json)
{
var cstyle=parseInt(getStyle(obj,attr)); //獲得當(dāng)前屬性
var step=(json[attr]-cstyle)/10; //計(jì)算步長(zhǎng)
step=step>0 ? Math.ceil(step) : Math.floor(step);
obj.style[attr]=cstyle+step+"px";
if(cstyle!=json[attr]) //在遍歷中，只要有一個(gè)屬性值沒(méi)到達(dá)目標(biāo)位置，定時(shí)器就不能停
{
flag=false;
}
}
if(flag) //遍歷完了之后，flag是true，所有的值都到達(dá)目標(biāo)位置了，停止定時(shí)器
{
clearInterval(obj.timer);
if(fn) //回調(diào)函數(shù)，定時(shí)器關(guān)閉之后，如果有fn，執(zhí)行fn（）
{
fn();
}
}
},30)
}
//返回當(dāng)前樣式的函數(shù)
function getStyle(obj,attr) //返回誰(shuí)的，哪個(gè)屬性
{
if(obj.currrentStyle)
{
return obj.currentStyle[attr];
}
else{
return window.getComputedStyle(obj,null)[attr]; //w3c瀏覽器
}
}
</script>
關(guān)鍵代碼：
1、demo（最外面整個(gè)大盒子）的定位
固定定位，放在頁(yè)面的右下方
span（關(guān)閉按鈕）絕對(duì)定位在demo的右上方：
#demo{
width:322px;
position : fixed;
bottom:0;
right:0;
}
span{
width:30px;
height: 20px;
position:absolute;
top:0;
right:0;
cursor:pointer;
}
2、防止冒泡，因?yàn)閟pan（關(guān)閉按鈕）的父元素是demo, 所以不能直接寫 span.onclick , 這樣會(huì)發(fā)生冒泡，相當(dāng)于點(diǎn)擊了父元素demo, 事件會(huì)響應(yīng)在父元素上，所以應(yīng)該用span的 id 綁定事件
3、回調(diào)函數(shù)，點(diǎn)擊關(guān)閉按鈕時(shí)，首先下面的盒子 高度變成 0 ，然后整個(gè)盒子的寬度 變成 0，依次消失 （所以一開(kāi)始demo 的高度不應(yīng)該設(shè)置，因?yàn)橄旅娴暮凶酉е?，上面的盒子?huì)掉下來(lái)） 回調(diào)函數(shù)寫的位置：定時(shí)器結(jié)束的位置
close.onclick=function(){
run(xia, {height:0}, function(){
run(shang,{demo:0}
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
webpack圖片轉(zhuǎn)為base64的實(shí)現(xiàn)示例
在開(kāi)發(fā)過(guò)程中,圖片轉(zhuǎn)成base64是常有的事,本文主要介紹了webpack圖片轉(zhuǎn)為base64的實(shí)現(xiàn)示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要為大家詳細(xì)介紹了laypage.js分頁(yè)插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
微信小程序圖片加載失敗時(shí)替換為默認(rèn)圖片的方法
這篇文章主要介紹了微信小程序圖片加載失敗時(shí)替換為默認(rèn)圖片的方法,本文分情況通過(guò)實(shí)例代碼給大家講解，需要的朋友可以參考下2019-12-12
JavaScript實(shí)現(xiàn)旋轉(zhuǎn)輪播圖
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)旋轉(zhuǎn)輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要為大家詳細(xì)介紹了js繪制購(gòu)物車拋物線動(dòng)畫(huà)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
除了正常運(yùn)行模式，ECMAscript 5添加了第二種運(yùn)行模式："嚴(yán)格模式"（strict mode）。顧名思義，這種模式使得Javascript在更嚴(yán)格的條件下運(yùn)行。這篇文章給大家詳細(xì)介紹了js判斷瀏覽器是否支持嚴(yán)格模式的方法，有需要的朋友們可以參考借鑒。2016-10-10
詰屈聱牙之javascript中國(guó)象棋...2007-04-04
一分鐘學(xué)會(huì)JavaScript中的try-catch
這篇文章主要給大家介紹了關(guān)于如何通過(guò)一分鐘學(xué)會(huì)JavaScript中try-catch的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
javaScript 關(guān)閉瀏覽器 (不彈出提示框)
如果網(wǎng)頁(yè)不是通過(guò)腳本程序打開(kāi)的（window.open()），調(diào)用window.close()腳本關(guān)閉窗口前，必須先將window.opener對(duì)象置為null，否則瀏覽器（IE7、IE8）會(huì)彈出一個(gè)確定關(guān)閉的對(duì)話框。2010-01-01
再談javascript圖片預(yù)加載技術(shù)(詳細(xì)演示)
由于javascript無(wú)法獲取img文件頭數(shù)據(jù)，必須等待其加載完畢后才能獲取真實(shí)的大小，所以lightbox類效果為了讓圖片居中顯示，導(dǎo)致其速度體驗(yàn)要比直接輸出的差很多。2011-03-03