淺談原生JS實(shí)現(xiàn)jQuery的animate()動(dòng)畫示例
本文介紹了淺談原生JS實(shí)現(xiàn)jQuery的animate()動(dòng)畫示例,希望此文章對各位有所幫助。
參數(shù)介紹:
obj |
執(zhí)行動(dòng)畫的元素 |
css | JSON數(shù)值對,形式為“{屬性名: 屬性值}",指要執(zhí)行動(dòng)畫的書序及其對應(yīng)值 |
interval |
屬性每執(zhí)行一次改變的時(shí)間間隔 |
speedFactor | 速度因子,使動(dòng)畫具有緩沖效果,而不是勻速不變(speedFactor為1) |
func | 執(zhí)行完動(dòng)畫后的回調(diào)函數(shù) |
注意:
必須為每一個(gè)元素分別添加一個(gè)定時(shí)器,否則會(huì)互相影響。
cur != css[arr]判斷是否每一個(gè)屬性已經(jīng)達(dá)到目標(biāo)值。只有所有屬性都達(dá)到目標(biāo)值,才會(huì)清除定時(shí)器,flag的作用是防止某個(gè)屬性第一個(gè)達(dá)到目標(biāo)值但還有其他屬性沒有達(dá)到目標(biāo)值的情況下清除定時(shí)器。因此,在每次改變前初始化flag為true,只要遇到一個(gè)沒有達(dá)到目標(biāo)的屬性,就將flag置為false,直至所有屬性達(dá)到目標(biāo)值才清除定時(shí)器。
屬性值opacity的值有小數(shù),所以需要特殊處理: Math.ceil(speed)和Math.floor(speed)以及* 100和 / 100操作。
function animate(obj, css, interval, speedFactor, func) { clearInterval(obj.timer); function getCss(obj, prop) { if (obj.currentStyle) return obj.currentStyle[prop]; // ie else return document.defaultView.getComputedStyle(obj, null)[prop]; // 非ie } obj.timer = setInterval(function(){ var flag = true; for (var prop in css) { var cur = 0; if(prop == "opacity") cur = Math.round(parseFloat(getStyle(obj, prop)) * 100); else cur = parseInt(getStyle(obj, prop)); var speed = (css[prop] - cur) * speedFactor; speed = speed > 0 ? Math.ceil(speed): Math.floor(speed); if (cur != css[prop]) flag = false; if (prop == "opacity") { obj.style.filter = "alpha(opacity : '+(cur + speed)+' )"; obj.style.opacity = (cur + speed) / 100; } else obj.style[prop] = cur + speed + "px"; } if (flag) { clearInterval(obj.timer); if (func) func(); } }, interval); } var li = document.getElementsByTagName("li"); for(var i = 0; i < li.length; i ++){ li[i].onmouseover = function(){ animate(this, {width: 100, opacity: 0.5}, 10, 0.01, function(){ alert("Finished!"); }); } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 原生JS封裝animate運(yùn)動(dòng)框架的實(shí)例
- jQuery animate()實(shí)現(xiàn)背景色漸變效果的處理方法【使用jQuery.color.js插件】
- 原生js實(shí)現(xiàn)jquery函數(shù)animate()動(dòng)畫效果的簡單實(shí)例
- 原生js仿jquery animate動(dòng)畫效果
- js實(shí)現(xiàn)類似jquery里animate動(dòng)畫效果的方法
- js動(dòng)畫(animate)簡單引擎代碼示例
- 用js實(shí)現(xiàn)的模擬jquery的animate自定義動(dòng)畫(2.5K)
- javascript?中動(dòng)畫制作方法?animate()屬性
相關(guān)文章
整理8個(gè)很棒的 jQuery 倒計(jì)時(shí)插件和教程
jQuery 是最流行也是使用最廣泛的 JavaScript 框架,它簡化了 HTML 文檔操作,事件處理,動(dòng)畫效果和 Ajax 交互。下面向大家分享8個(gè)優(yōu)秀的 jQuery 倒計(jì)時(shí)插件和教程2011-12-12jquery實(shí)現(xiàn)預(yù)覽提交的表單代碼分享
這篇文章主要介紹了jquery實(shí)現(xiàn)預(yù)覽提交的表單代碼,需要的朋友可以參考下2014-05-05jQuery實(shí)現(xiàn)延遲跳轉(zhuǎn)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)延遲跳轉(zhuǎn)的方法,涉及jQuery中setTimeout方法延遲觸發(fā)的使用技巧,需要的朋友可以參考下2015-06-06jQuery實(shí)現(xiàn)可展開合攏的手風(fēng)琴面板菜單
這篇文章主要介紹了jQuery實(shí)現(xiàn)可展開合攏的手風(fēng)琴面板菜單,涉及jQuery中slideUp及slideDown方法的相關(guān)使用技巧,代碼簡單實(shí)用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09jquery實(shí)現(xiàn)標(biāo)題字體變換的滑動(dòng)門菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)標(biāo)題字體變換的滑動(dòng)門菜單效果,通過調(diào)用自定義函數(shù)實(shí)現(xiàn)頁面tab切換及字體樣式同步變換的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09使用JQuery實(shí)現(xiàn)智能表單驗(yàn)證功能
表單驗(yàn)證功能在項(xiàng)目中經(jīng)常會(huì)用得到,接下來給大家介紹使用jquery實(shí)現(xiàn)智能表單驗(yàn)證功能實(shí)例代碼,對jquery實(shí)現(xiàn)表單驗(yàn)證功能相關(guān)資料感興趣的朋友一起學(xué)習(xí)吧2016-03-03jQuery僅用3行代碼實(shí)現(xiàn)的顯示與隱藏功能完整實(shí)例
這篇文章主要介紹了jQuery僅用3行代碼實(shí)現(xiàn)的顯示與隱藏功能,以完整實(shí)例形式分析了jQuery實(shí)現(xiàn)鼠標(biāo)響應(yīng)及頁面元素屬性變換的相關(guān)技巧,需要的朋友可以參考下2015-10-10通過jQuery源碼學(xué)習(xí)javascript(三)
承接上兩篇繼續(xù)寫下去。我盡量把我明白的地方給大家說清楚。有些大家的提問我也有點(diǎn)搞不明白,如果有人能解答,再好不過了2012-12-12