溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文介紹了淺談原生JS實現jQuery的animate()動畫示例，希望此文章對各位有所幫助。
參數介紹：
| obj |
執行動畫的元素 |
| css | JSON數值對，形式為“{屬性名: 屬性值}"，指要執行動畫的書序及其對應值 |
| interval |
屬性每執行一次改變的時間間隔 |
| speedFactor | 速度因子，使動畫具有緩沖效果，而不是勻速不變（speedFactor為1） |
| func | 執行完動畫后的回調函數 |
注意：
必須為每一個元素分別添加一個定時器，否則會互相影響。
cur != css[arr]判斷是否每一個屬性已經達到目標值。只有所有屬性都達到目標值，才會清除定時器，flag的作用是防止某個屬性第一個達到目標值但還有其他屬性沒有達到目標值的情況下清除定時器。因此，在每次改變前初始化flag為true，只要遇到一個沒有達到目標的屬性，就將flag置為false，直至所有屬性達到目標值才清除定時器。
屬性值opacity的值有小數，所以需要特殊處理： 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!");
});
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
