摘要:我們可以在運動框架的基礎(chǔ)上,在加上一個函數(shù),當(dāng)運動執(zhí)行完成之后執(zhí)行的操作。鏈?zhǔn)竭\動框架有可能會出現(xiàn)誤差運動結(jié)束后,如果參數(shù)傳遞進去了就執(zhí)行函數(shù)鏈?zhǔn)竭\動例子我們用上面的鏈?zhǔn)竭\動框架做一個先運動調(diào)整寬度,再運動調(diào)整高度,最后運動調(diào)整透明度。
前面介紹的運動都是一個物體運動之后就結(jié)束了,如果一個物體運動之后,還有其他的操作,比如一個div先變寬,然后變高、最后變透明度,我們前面的運動框架就不滿足情況了。我們可以在運動框架的基礎(chǔ)上,在加上一個fnEnd函數(shù),當(dāng)運動執(zhí)行完成之后執(zhí)行的操作。
鏈?zhǔn)竭\動框架function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; } else{ return getComputedStyle(obj,false)[name]; } } function startMove(obj, attr, iTarget, fnEnd) { clearInterval(obj.timer); obj.timer = setInterval(function() { var cur=0; if(attr==="opacity"){ cur=Math.round(parseFloat(getStyle(obj,attr))*100);//有可能會出現(xiàn)誤差0.07*100 } else{ cur=parseInt(getStyle(obj,attr)); } var speed = (iTarget - cur) / 6; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (cur === iTarget) { clearInterval(obj.timer); if(fnEnd)fnEnd();//運動結(jié)束后,如果fnEnd參數(shù)傳遞進去了就執(zhí)行fnEnd函數(shù) } else { if(attr==="opacity"){ obj.style.filter="alpha(opacity:"+cur+speed+")"; obj.style.opacity=(cur+speed)/100; }else{ obj.style[attr]=cur+speed+"px"; } } }, 30) }鏈?zhǔn)竭\動例子
我們用上面的鏈?zhǔn)竭\動框架做一個div先運動調(diào)整寬度,再運動調(diào)整高度,最后 運動調(diào)整透明度。
鏈?zhǔn)竭\動
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/97214.html
摘要:運動框架動起來進行運動的節(jié)點定時器你沒看錯,就是那么簡單。直接在定時器內(nèi)部,判斷到達目標(biāo)值,清除定時器就行拉運動框架運動終止進行運動的節(jié)點運動終止條件。 轉(zhuǎn)自個人博客三省吾身丶丶原來是JS動畫效果,但是我會過頭再看的時候,發(fā)現(xiàn)太粗略了,于是重新寫了一篇。喜歡別只收藏啊,點個推薦,大兄弟^ ^! 運動框架的實現(xiàn)思路 運動,其實就是在一段時間內(nèi)改變left、right、width、hei...
摘要:運動做鏈?zhǔn)竭\動的時候可以使用回調(diào)函數(shù),多寫幾個運動。然后逐一運動這些調(diào)用。默認(rèn)是,即僅停止活動的動畫,允許任何排入隊列的動畫向后執(zhí)行。可選參數(shù)規(guī)定是否立即完成當(dāng)前動畫。清除當(dāng)前運動停止滑動點擊這里,向下滑動面板 在前面封裝的move.js框架,在jquery中有同樣封裝好的功能animate()。使用方法非常類似,下面我們看看animate的使用方法,有了原生的運動方法,然后再使用jq...
摘要:在這個完美運動框架中,我們可以只讓一個物體的一個屬性運動,可以鏈?zhǔn)秸{(diào)用,也可以幾個屬性同時運動。能解決我們項目中遇到的大部分運動。運動框架演變過程運動實現(xiàn)留言板的例子完美運動運動,高度展開發(fā)布 前面的運動,每次只能改一個值,你改div的width的時候,就不能改div的高度,改高度的時候就不能改寬度,如果我的運動想同時改寬度和高度,怎么實現(xiàn)?在這里我們把屬性和目標(biāo)值用json實現(xiàn)。在這...
摘要:一些有用的一些有用的,包括轉(zhuǎn)換小箭頭三角形媒體查詢等中文指南是當(dāng)下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程,大家可以在 github 上提交錯誤 2016 年最好用的表單驗證庫 SMValidator.js 前端表單驗證工具分享 淺談前端線上部署與運維 說到前端部署,可能大多數(shù)前端工程師在工作中都是使用的公司現(xiàn)成的部署系統(tǒng),與SRE對接、一起完...
摘要:一些有用的一些有用的,包括轉(zhuǎn)換小箭頭三角形媒體查詢等中文指南是當(dāng)下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程,大家可以在 github 上提交錯誤 2016 年最好用的表單驗證庫 SMValidator.js 前端表單驗證工具分享 淺談前端線上部署與運維 說到前端部署,可能大多數(shù)前端工程師在工作中都是使用的公司現(xiàn)成的部署系統(tǒng),與SRE對接、一起完...
閱讀 1684·2021-09-26 09:55
閱讀 3713·2021-09-22 15:31
閱讀 7330·2021-09-22 15:12
閱讀 2209·2021-09-22 10:02
閱讀 4625·2021-09-04 16:40
閱讀 1031·2019-08-30 15:55
閱讀 3018·2019-08-30 12:56
閱讀 1813·2019-08-30 12:44