浅谈原生JS实现jQuery的animate()动画

来源：互联网发布：淘宝品牌女装折扣店编辑：程序博客网时间：2024/06/04 20:31

参数介绍：

obj
执行动画的元素cssJSON数值对，形式为“{属性名: 属性值}"，指要执行动画的书序及其对应值
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]; // ieelse 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!");});}}

1 0