首頁 > 開發者 > JavaScript
網上也有很多封裝好的JS動畫庫，但大多因為功能過於完善，而至於代碼量大動輒過千行，不宜在小項目中使用。這裡自己封裝了一個很輕量的動畫庫，主要功能都已實現。難免有疏漏之處，還請大家多多指教。
這裡先說明一下功能和用法，以及注意點，隨後是一個很簡單的可運行樣本。
用法及注意事項：
anim(elemId, cssObj, time, animType, funObj)
參數說明：
elemId （必選）需要施加動畫效果的元素id
cssObj （必選）動畫結束時的樣式，物件類型，索引值對形式，
其中鍵是能直接用在JS中的“駝峰”形式的css屬性，而不是原來的css屬性。
例如：{ marginLeft: '200px', top: '200px', borderWidth: '8px'}
time （必選）動畫期間（單位ms）
animType （可選）預設為線性變化，代碼裡的Tween類型包含可選的其他參數
funObj （可選）如果要此選項，需要加入開始和結束時候執行的函數。
形如：{ el為elemId所指向的元素
start: function (el) { el.innerHTML = 'start!'; },
complete: function (el) { el.innerHTML = 'Completed!'; }
}
幾點注意事項：
1、沒有做低版本瀏覽器安全色，支援IE8+、FF、chrome、safari、opera
2、注意用能直接用在JS中的“駝峰”形式的css屬性（本來應把css轉“駝峰”形式，
但是基本所有JS程式員都能直接寫出駝峰形式，所以沒轉）
3、如果需要把動畫應用到絕對位置（position:absolute;）元素上，
需要注意在這些元素上設定CSS的方法。
例如：設定top和marginTop，對於絕對位置元素，應該設定top而不是marginTop，
更不應該將二者混合使用，因為二者的參考點是不一樣的，同時設定很容易造成混亂。
所以，這裡也不支援同時設定二者。
其他相似的同理（left和marginLeft、right和marginRight）
同時設定top和bottom、left和right也不支援。
4、引用了Tween緩動演算法，支援線性、漸入漸出等多種變化方式。
5、“動畫隊列”功能尚未實現，此版本為初級版本，疏漏之處還請多多指正。
<!DOCTYPE HTML> <html> <head> <title></title> <style type="text/css"> #container{ border:1px solid #000; width:500px; height:400px;} #aa{ border:1px solid #000; width:100px; height:40px; background-color:#0f0; position:absolute; left:50px; top:50px; } #bb{ border:1px solid #000; width:500px; height:40px; margin-top:100px;} #cc{ border:1px solid #000; width:500px; height:40px;} </style> </head><body> <input id="Abegin" type="button" value="開始" /> <input id="Apause" type="button" value="暫停" /> <input onclick="location.reload()" type="button" value="重新整理網頁" /> dfdfddfsd gregreger </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
