js 实现渐隐图片,鼠标经过时的渐现效果

　　JavaScript图片渐现渐隐效果，鼠标放上后激活函数，驱动图片逐渐显示，移开后恢复。本效果基于JS与CSS共同完成，CSS的作用是完成图片透明度的改变，这一步是单步的，Js负责重复这些单步，最终实现淡入淡出效果。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示

　　网页演示：猛击此处

　　运行演示：

<title>JS图片渐现渐隐效果</title> <SCRIPT language=JavaScript> <!-- nereidFadeObjects = new Object(); nereidFadeTimers = new Object(); function nereidFade(object, destOp, rate, delta){ if (!document.all) return if (object != "[object]"){ setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0); return; } clearTimeout(nereidFadeTimers[object.sourceIndex]); diff = destOp-object.filters.alpha.opacity; direction = 1; if (object.filters.alpha.opacity > destOp){ direction = -1; } delta=Math.min(direction*diff,delta); object.filters.alpha.opacity+=direction*delta; if (object.filters.alpha.opacity != destOp){ nereidFadeObjects[object.sourceIndex]=object; nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate); } } //--> </SCRIPT> <img src="http://www.veryhuo.com/uploads/common/images/liehuonet_400x345_1.jpg" width="300" height="249" border=0 style="BORDER-RIGHT: #ff6600 1px solid; BORDER-TOP: #ff6600 1px solid; FILTER: alpha(opacity=55); BORDER-LEFT: #ff6600 1px solid; CURSOR: hand; BORDER-BOTTOM: #ff6600 1px solid" onmouseover=nereidFade(this,100,10,5) onmouseout=nereidFade(this,50,10,5)> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：孝感站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!