JS簡單動畫封裝淺析
更新時間:2011年11月15日 01:54:23 作者:
JS動畫,實質(zhì)是對DOM樣式的改變。只要把主流瀏覽器DOM元素的屬性方法搞清楚,做JS動畫并不算難
網(wǎng)上也有很多封裝好的JS動畫庫,但大多因為功能過于完善,而至于代碼量大動輒過千行,不宜在小項目中使用。這里自己封裝了一個很輕量的動畫庫,主要功能都已實現(xiàn)。難免有疏漏之處,還請大家多多指教。
這里先說明一下功能和用法,以及注意點,隨后是一個很簡單的可運行示例。
用法及注意事項:
anim(elemId, cssObj, time, animType, funObj)
參數(shù)說明:
elemId (必選)需要施加動畫效果的元素id
cssObj (必選)動畫結(jié)束時的樣式,對象類型,鍵值對形式,
其中鍵是能直接用在JS中的“駝峰”形式的css屬性,而不是原來的css屬性。
例如:{ marginLeft: '200px', top: '200px', borderWidth: '8px'}
time (必選)動畫持續(xù)時間(單位ms)
animType (可選)默認為線性變化,代碼里的Tween類型包含可選的其他參數(shù)
funObj (可選)如果要此選項,需要加入開始和結(jié)束時候執(zhí)行的函數(shù)。
形如:{ el為elemId所指向的元素
start: function (el) { el.innerHTML = 'start!'; },
complete: function (el) { el.innerHTML = 'Completed!'; }
}
幾點注意事項:
1、沒有做低版本瀏覽器兼容,支持IE8+、FF、chrome、safari、opera
2、注意用能直接用在JS中的“駝峰”形式的css屬性(本來應把css轉(zhuǎn)“駝峰”形式,
但是基本所有JS程序員都能直接寫出駝峰形式,所以沒轉(zhuǎn))
3、如果需要把動畫應用到絕對定位(position:absolute;)元素上,
需要注意在這些元素上設置CSS的方法。
例如:設置top和marginTop,對于絕對定位元素,應該設置top而不是marginTop,
更不應該將二者混合使用,因為二者的參考點是不一樣的,同時設置很容易造成混亂。
所以,這里也不支持同時設置二者。
其他相似的同理(left和marginLeft、right和marginRight)
同時設置top和bottom、left和right也不支持。
4、引用了Tween緩動算法,支持線性、漸入漸出等多種變化方式。
5、“動畫隊列”功能尚未實現(xiàn),此版本為初級版本,疏漏之處還請多多指正。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這里先說明一下功能和用法,以及注意點,隨后是一個很簡單的可運行示例。
用法及注意事項:
anim(elemId, cssObj, time, animType, funObj)
參數(shù)說明:
elemId (必選)需要施加動畫效果的元素id
cssObj (必選)動畫結(jié)束時的樣式,對象類型,鍵值對形式,
其中鍵是能直接用在JS中的“駝峰”形式的css屬性,而不是原來的css屬性。
例如:{ marginLeft: '200px', top: '200px', borderWidth: '8px'}
time (必選)動畫持續(xù)時間(單位ms)
animType (可選)默認為線性變化,代碼里的Tween類型包含可選的其他參數(shù)
funObj (可選)如果要此選項,需要加入開始和結(jié)束時候執(zhí)行的函數(shù)。
形如:{ el為elemId所指向的元素
start: function (el) { el.innerHTML = 'start!'; },
complete: function (el) { el.innerHTML = 'Completed!'; }
}
幾點注意事項:
1、沒有做低版本瀏覽器兼容,支持IE8+、FF、chrome、safari、opera
2、注意用能直接用在JS中的“駝峰”形式的css屬性(本來應把css轉(zhuǎn)“駝峰”形式,
但是基本所有JS程序員都能直接寫出駝峰形式,所以沒轉(zhuǎn))
3、如果需要把動畫應用到絕對定位(position:absolute;)元素上,
需要注意在這些元素上設置CSS的方法。
例如:設置top和marginTop,對于絕對定位元素,應該設置top而不是marginTop,
更不應該將二者混合使用,因為二者的參考點是不一樣的,同時設置很容易造成混亂。
所以,這里也不支持同時設置二者。
其他相似的同理(left和marginLeft、right和marginRight)
同時設置top和bottom、left和right也不支持。
4、引用了Tween緩動算法,支持線性、漸入漸出等多種變化方式。
5、“動畫隊列”功能尚未實現(xiàn),此版本為初級版本,疏漏之處還請多多指正。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
您可能感興趣的文章:
相關文章
jsonp跨域及實現(xiàn)百度首頁聯(lián)想功能的方法
這篇文章主要介紹了jsonp跨域及實現(xiàn)百度首頁聯(lián)想功能的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
Javascript中實現(xiàn)String.startsWith和endsWith方法
這篇文章主要介紹了Javascript中實現(xiàn)String.startsWith和endsWith方法,這兩個很好用的方法在JS中沒有,本文就自己編碼實現(xiàn)了這兩個方法,需要的朋友可以參考下2015-06-06
JavaScript?顯示一個倒計時廣告牌的實現(xiàn)示例
本文主要介紹了JavaScript?顯示一個倒計時廣告牌的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-04-04

