实现多个元素的动画效果，如下：
more_animation.gif
我们可以看到移动鼠标可以改变不同图片的透明度
具体实现过程：
html+css内容：注意这里设置了list-style属性，从而取消了ul的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HomeWork</title>
<style>
.img, img {
opacity: 1.0;
}
.img{
list-style: none;
}
</style>
</head>
<body>
<ul class="img">
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
<script src="animation.js"></script>
</body>
</html>
设置鼠标的移入移出事件：这里一定要注意的是要为每个元素设置计时器和透明度，不能像上章一样，公用同一个计时器和透明度，否则会发生元素之间的冲突事件
window.onload = function () {
//检查是否支持getElementById方法
if (! document.getElementsByTagName) return false;
//获取到img元素
var imgs = document.getElementsByTagName("img");
for(var i = 0; i < imgs.length; i ++){
//为当前元素设置一个计时器
imgs[i].timer = null;
//为当前元素设置一个透明度
imgs[i].alpha = 0;
imgs[i].onmouseover = function () {
//this表示为传入当前元素
startMove(50,this)
};
imgs[i].onmouseout = function () {
startMove(100,this)
}
}
};
改变其透明度属性：
/**
* 传入目标值和对象元素
* @param target
* @param obj
*/
function startMove(target,obj) {
//取消其他time事件，防止鼠标多次的移入移出产生异常的效果
clearInterval(obj.timer);
//设置time事件，每30ms执行一次
obj.timer = setInterval(function (){
var speed = 0;
//当前透明度超过目标值，则应该减少，速度设置为负数，否则速度设置为正数
if (obj.alpha > target){
speed = -10;
} else {
speed = 10;
}
//达到目标值时，取消时间函数
if (obj.alpha == target){
clearInterval(obj.timer);
}
//否则，继续改变透明度，并为img元素设置其属性
else {
obj.alpha += speed;
obj.style.opacity = obj.alpha / 100;
}
},30);
}
总结：这小节主要学习到的是在实现多个元素的动画效果时，不能公用同一个变量或者同一个计时器，否则会发生事件冲突，我们需要为每个元素都设置其独立的变量或计时器。
设置方法如下：
//为当前元素设置一个计时器
imgs[i].timer = null;
//为当前元素设置一个透明度
imgs[i].alpha = 0;
然后在函数中以点形式.调用即可
obj.timer;
obj.alpha;
网友评论