关于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);
};
JavaScript HTML 图片 运动
[解决办法]
基本都对了。因为是多图，所以定时器 要区别下
还有是 +=。不是=+
window.onload = function() {
var wall = document.getElementById('wall');
var aImg = wall.getElementsByTagName('img');
for (var i = 0; i < 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);
};
