系列文章导航
JavaScript动画1-速度动画
JavaScript动画2-缓冲运动
JavaScript动画3-多物体运动
JavaScript动画4-任意属性值
JavaScript动画5-链式运动
JavaScript动画6-同时运动
所有源代码
在介绍任意属性值之前，先说一个潜在的问题。之前我们几篇JavaScript动画中使用的例子，里面的元素都是没有边框的，即border为0，所以offsetWidth就等于元素的width，但实际上，offsetWidth=width+左边框+右边框。所以如果我们要对一个有边框的元素使用前面的动画方法，就会出现问题。
那有没有什么办法获得元素的width，而不包括左右边框呢？
有！
function getStyle(obj, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(obj, null)[attr];
} else if (obj.currentStyle) {
return obj.currentStyle[attr];
}
}
我封装了一个getStyle函数。该函数的具体讲解请看这里http://www.jianshu.com/p/de893f7e6143 。这里就不赘述了。总之你不能通过obj.style.width来获取元素的实际宽度。
按照这样的写法，前面第一篇《JavaScript动画3-多物体运动》中的例子应该改为：
(function () {
...
function startMove(obj, targetWidth) {
...
obj.timer = setInterval(function () {
var speed = (targetWidth - parseInt(getStyle(obj,'width'))) / 10; //缓冲运动
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (parseInt(getStyle(obj,'width')) == targetWidth) {
clearInterval(obj.timer);
} else {
obj.style.width = parseInt(obj,'width') + speed + 'px';
}
}, 20);
}
})();
任意属性值
上面的代码只能改变元素的width实现动画，如果我们想要改变元素的height属性，就不得不重新写一份代码，将startMove函数中的width改成height。这样非常麻烦，因为其他代码都是类似的。所以我们可以将不同的部分当做参数传进去。我们来实现一下。
HTML代码结构如下：
<div id="div6">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
JavaScript代码如下：
//任意属性参数
(function () {
var lists = document.getElementById("div6").getElementsByTagName("li");
for (var i = 0; i < lists.length; i++) {
lists[i].timer = null; //给每个元素设置一个单独的定时器
}
lists[0].onmouseover = function () {
startMove(this, 'width', 600);
};
lists[0].onmouseout = function () {
startMove(this, 'width', 200);
};
lists[1].onmouseover = function () {
startMove(this, 'height', 400);
};
lists[1].onmouseout = function () {
startMove(this, 'height', 100);
};
function startMove(obj, attr, targetValue) {
if (obj.timer) {
clearInterval(obj.timer);
}
obj.timer = setInterval(function () {
var currentValue = parseInt(getStyle(obj, attr));
var speed = (targetValue - currentValue) / 10; //缓冲运动
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (currentValue == targetValue) {
clearInterval(obj.timer);
} else {
obj.style[attr] = currentValue + speed + 'px';
}
}, 20);
}
})();
其中，startMove函数多了一个参数attr，用于指定改变width还是height。
但上面的代码还是有问题，当我们传进去一个opacity属性的时候，上面的代码就不能正常工作了。因此我们需要在startMove函数中进行判断：如果是opacity，则另外进行处理。
因为可以处理透明度了，所以我们把startMove函数改名为change。
(function () {
var lists = document.getElementById("div6").getElementsByTagName("li");
for (var i = 0; i < lists.length; i++) {
lists[i].timer = null; //给每个元素设置一个单独的定时器
}
lists[0].onmouseover = function () {
change(this, 'width', 600);
};
lists[0].onmouseout = function () {
change(this, 'width', 200);
};
lists[1].onmouseover = function () {
change(this, 'opacity', 60);
};
lists[1].onmouseout = function () {
change(this, 'opacity', 100);
};
lists[2].onmouseover = function () {
change(this, 'height', 400);
};
lists[2].onmouseout = function () {
change(this, 'height', 100);
};
function change(obj, attr, targetValue) {
if (obj.timer) {
clearInterval(obj.timer);
}
obj.timer = setInterval(function () {
var currentValue = 0;
if (attr == 'opacity') {
currentValue = Math.round((parseFloat(getStyle(obj, attr)) * 100));
} else {
currentValue = parseInt(getStyle(obj, attr));
}
var speed = (targetValue - currentValue) / 10; //缓冲运动
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (currentValue == targetValue) {
clearInterval(obj.timer);
} else {
if (attr == 'opacity') {
obj.style.opacity = (currentValue + speed) / 100;
} else {
obj.style[attr] = currentValue + speed + 'px';
}
}
}, 20);
}
})();
最后完成的效果如下：
