会出现如图情况,鼠标移入颜色变浅,但是划过另外一个图片时候 原先的图片不回复,请问原因?所用图片在最后<!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.jswindow.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);}
1 回答
习惯受伤
TA贡献885条经验 获得超1144个赞
Filter 函数
注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75)。所以你代码中filter那个值改一下试试
添加回答
举报
0/150
提交
取消