关于js运动，图片淡入淡出,该如何解决

关于js运动，图片淡入淡出
先将图片的样式，用滤镜opacity ： 0.3 ，移入图片是，值增加为1，移出是，变为0.3.用的是js的运动，但是为什么达不到效果，firebug里timer = setInterval(function () { 的东西不执行，

HTML代码如下
<body>
<div id="wall">

<img src="images/m_20130226image19366.jpg" />
<img src="images/m_20130226image19367.jpg" />
<img src="images/m_20130226image19368.jpg" />
<img src="images/m_20130226image19369.jpg" />
<img src="images/m_20130226image19370.jpg" />
<img src="images/m_20130226image19371.jpg" />
<img src="images/m_20130226image19372.jpg" />
<img src="images/m_20130226image19373.jpg" />
<img src="images/m_20130226image19374.jpg" />
</div>
</body>
CSS部分：
body
{
background:url(../images/bg.jpg);
overflow:hidden;
}
#wall
{
width:500px;
height:500px;
margin: auto;
}
#wall img
{
width:150px;
height:150px;
margin:1px;
filter:alpha(opacity:30); //IE下
opacity:0.3;
}
JS部分：
window.onload = function () {
var wall = document.getElementById('wall');
var aImg = wall.getElementsByTagName('img');

for (i = 0; i < aImg.length; i++) { //为每个图片注册事件
aImg[i].onmouseover = function () {
startMove(100);
}
aImg[i].onmouseout = function () {
startMove(30);
}
};

}

var timer = null;//定时器
var alpha = 30; //自己设置的变量，滤镜值

function startMove(iTarget) { //通过改变图片的滤镜值，达到淡入淡出的效果
clearInterval(timer);
timer = setInterval(function () {
var speed = 0;
if (alpha > iTarget) { //判断是淡入还是淡出
speed = -10;

}
else {
speed = 10;
}
if (alpha == iTarget) { //滤镜值达到目标是，关闭定时器
clearInterval(timer);
}
else { //滤镜值未达到目标
alpha = +speed;
this.style.filter = 'alpha(opacity:' + alpha + ')';
this.style.opacity = alpha / 100;
}
}, 30);
};

关于js运动，图片淡入淡出,该如何解决
JavaScript HTML 图片运动
[解决办法]
基本都对了。因为是多图，所以定时器要区别下
还有是 +=。不是=+


 window.onload = function() {
            var wall = document.getElementById('wall');
            var aImg = wall.getElementsByTagName('img');

            for (var i = 0; i &lt; aImg.length; i++) {  //为每个图片注册事件
                aImg[i].onmouseover = function() {
                    startMove(this,100);
                }
                aImg[i].onmouseout = function() {
                    startMove(this,30);
                }
            };
        }
        var timer = null; //定时器 
 
        var alpha = 30; //自己设置的变量，滤镜值
        var speed = 0;
        function startMove(obj,iTarget) {       //通过改变图片的滤镜值，达到淡入淡出的效果
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                speed = iTarget == 100 ? 10 : -10; //判断是淡入还是淡出

                if (alpha == iTarget) {       //滤镜值达到目标是，关闭定时器
                    clearInterval(obj.timer);
                }
                else {
                    alpha += speed; //滤镜值未达到目标
                    obj.style.filter = 'alpha(opacity:' + alpha + ')';
                    obj.style.opacity = alpha / 100;
                }
            }, 30);
        };

关于js运动图片淡入淡出,该如何解决

热点推荐