透明度动画（类淘宝划过图片效果），鼠标划过、划出图片透明度不改变
会出现如图情况，鼠标移入颜色变浅，但是划过另外一个图片时候 原先的图片不回复，请问原因？
所用图片在最后
<!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)
};
}
}
var timer=null,
alpha=100;
function startchange(iTarget,that){
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
if (alpha>iTarget) {
speed=-10;
} else{
speed=10;
}
if (alpha==iTarget) {
clearInterval(timer);
}else{
alpha+=speed;
that.style.filter='alpha(opacity:'+alpha+')';
that.style.opacity=alpha/100;
}
},30);
}
wubin_work1回答
-
习惯受伤
Filter 函数 注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。所以你代码中filter那个值改一下试试
随时随地看视频慕课网APP
相关分类
JavaScript