请各位高手帮忙解决，网上找了挺久，没找到满意的效果。
我是想用JavaScript实现图片淡入的效果（从没有->模糊->清晰）。
具体需求就是，我是想在表格中显示图片，但是又为了不太影响表格中的布局（图片一般比较大，很占位置），我就想把表格中的图片长宽设置小一点，比如（5px，5px），然后鼠标放在那张图片上的时候，就在该图片的右上角完全显示该图片（以淡入的方式出现，最好是也能控制显示的大小，但是绝对要比原图片大，起码能不太影响图片的观看效果），然后鼠标移出原图片（小图片）时，大图片再淡出。
繁星淼淼浏览 92回答 1
1回答
-
哆啦的时光机
利用闭包实现就可以了..//settimeout<script>window.onload=function(){document.getElementById('test').onmouseover=show;document.getElementById('test').onmouseout=hide;}functionsetOpacity(elem,num){if(elem.filters){returnelem.style.filter='alpha(opacity='+num+')';}else{returnelem.style.opacity=parseFloat(num/100);}}functionshow(){var$this=this;for(vari=0;i<=100;i++){(function(){//catchi;varp=i;setTimeout(function(){setOpacity($this,p);},p*2);})();}}functionhide(){var$this=this;for(vari=100;i>=0;i--){(function(){//catchi;varp=i;setTimeout(function(){setOpacity($this,100-p);},p/2);})();}}</script><style>#test{width:200px;height:200px;background:#ff0099;*filter:alpha(opacity=0);opacity:0;}</style><body><divid='test'></div></body>//其实这个问题我很久之前有做过...实现淡入的方法很简单...但是淡出..不知道为什么..用同样的方法总是不行...其实一楼说的jquery很容易实现..我早上也查了一下jquery原码..当时是查的hide和show..不过它是通过其他的函数来实现的.fade倒是没有找到....今天看到你的问题我重新做了一次...还是那个问题...后来用变量跟踪发现...hide函数i被捕获后..p确实=i.但是进入setTimeout函数后.它就会变成100-P....所以hide函数我给他改成了100-p....但是具体的原因我也很郁闷...后来用interval的方法来实现....就不存在这个问题了...//setintervalvari=0;varshowID;varhideID;window.onload=function(){document.getElementById('test').onmouseover=show;document.getElementById('test').onmouseout=hide;}functionsetOpacity(elem,num){if(elem.filters){returnelem.style.filter='alpha(opacity='+num+')';}else{returnelem.style.opacity=parseFloat(num/100);}}functionshow(){var$this=this;showID=setInterval(function(){if(i<100){setOpacity($this,i);i+=5;}else{clearInterval(showID);}},10);}functionhide(){var$this=this;hideID=setInterval(function(){if(i>=0){setOpacity($this,i);i-=5;}else{clearInterval(hideID);}},10);}希望能帮到你
随时随地看视频慕课网APP
相关分类
JavaScript