本文介绍如何使用JavaScript实现图片鼠标悬停时的透明度渐变效果。通过定义CSS样式控制菜单布局，并结合onmouseover与onmouseout事件调用nereidFade函数，实现图片从透明到清晰或反之的平滑过渡动画。
JavaScript图片透明度渐变特效实现
<style type="text/css"> <!-- #menu{ margin:0px; padding:0px; width:350px; height:72px;} #menu li{ margin-right:10px; float:left;} --> </style> <div style="margin-top:20px;" align="center"> <ul id="menu"> <li style="background-image:url(/pic/ma_1.gif)"><img src='/pic/Mb_1.gif' alt="工作室 | Studio" border='0' style='FILTER: alpha(opacity=0)' onmouseover=nereidFade(this,100,10,7) onmouseout=nereidFade(this,01,70,5)></li><li style="background-image:url(/pic/ma_2.gif)"><img src='/pic/Mb_2.gif' alt="油画 | Canvas" border='0' style='FILTER: alpha(opacity=0)' onmouseover=nereidFade(this,100,10,7) onmouseout=nereidFade(this,01,70,5)></li><li style="background-image:url(/pic/ma_3.gif)"><img src='/pic/Mb_3.gif' alt="唐装 | Tangsuit" border='0' style='FILTER: alpha(opacity=0)' onmouseover=nereidFade(this,100,10,7) onmouseout=nereidFade(this,01,70,5)></li><li style="background-image:url(/pic/ma_4.gif)"><img src='/pic/Mb_4.gif' alt="美玉 | Jade" border='0' style='FILTER: alpha(opacity=0)' onmouseover=nereidFade(this,100,10,7) onmouseout=nereidFade(this,01,70,5)></li><li style="background-image:url(/pic/ma_5.gif)"><img src='/pic/Mb_5.gif' alt="导航 | Gps" border='0' style='FILTER: alpha(opacity=0)' onmouseover=nereidFade(this,100,10,7) onmouseout=nereidFade(this,01,70,5)></li></ul> </div> 注意：引入外部JavaScript文件后，通常需要刷新页面才能生效。