透明度动画（类淘宝划过图片效果），鼠标划过、划出图片透明度不改变
wubin_work
2017-03-25 16:55
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>透明度动画应用</title>
<style>
*{margin: 0;padding: 0;}
ul{list-style: none;}
img{border: 0;}
#imgbox{width:664px;margin: 50px auto;}
#imgbox ul li{overflow: hidden;border: 1px solid #B7B5B5;}
#imgbox ul li:first-child{margin-bottom: -1px;}
#imgbox ul li a{float: left;text-decoration: none;padding: 10px;}
.ablr{border-width: 0px 1px 0px 1px;border-style: solid;border-color: #B7B5B5;}
</style>
</head>
<body>
<div id="imgbox">
<ul>
<li>
<a href="#"><img src="1.jpg"></a>
<a href="#"><img src="2.jpg"></a>
<a href="#"><img src="3.jpg"></a>
</li>
<li>
<a href="#"><img src="4.jpg"></a>
<a href="#"><img src="5.jpg"></a>
<a href="#"><img src="6.jpg"></a>
</li>
</ul>
</div>
<script src="jsopacity.js"></script>
</body>
</html>
jsopacity.js
window.onload=function(){
var box=document.getElementById('imgbox'),
img=box.getElementsByTagName('img');
for(var i=0;i<img.length;i++){
img[i].onmouseover=function(){
startchange(50,this)
};
img[i].onmouseout=function(){
startchange(100,this)
};
}
会出现有多个图片同时处在选中状态，请问哪里错了、、
1回答
-
- 六月ovo
- 2017-03-25 23:11:07
定时器不可以共用，你这里明显多个对象动画都共用一个定时器【timer】了，应该把定时器的地方都改成 obj.timer ， 在运动函数里面，增加一个obj的参数。例如：
//这里是遍历的代码
for(var i=0,l=img.length;i<l;i++){
img[i].timer = null;
img[i].onmouseover=function(){
moveFn(img[i],50);
}
img[i].onmouseout=function(){
moveFn(img[i],100);
}
}
//这里是运动框架代码的上面部分，下面部分跟原来的差不多的，只要是修改定时器
function moveFn(obj,itarget){
clearInterval(obj,timer);
obj.timer = setInterval(function(){
// 运动代码，自行补充
},10);
}
JS动画效果
113931 学习 · 1443 问题
相似问题