JS动画（三）

---

实现多个元素的动画效果，如下：

more_animation.gif

我们可以看到移动鼠标可以改变不同图片的透明度

具体实现过程：

html+css内容：注意这里设置了list-style属性，从而取消了ul的样式

    
    

    



    

        ![](girl.jpg)
    
    

        ![](dog.jpg)
    
    

        ![](pig.jpg)
    

设置鼠标的移入移出事件：这里一定要注意的是要为每个元素设置计时器和透明度，不能像上章一样，公用同一个计时器和透明度，否则会发生元素之间的冲突事件

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;