鼠标实现图片的渐有渐无CSSHTML教程 -免费技术教程下载中心

1，CSS，JS，IMG一个都不能少

运行代码框
<style type="text/css"></style><script language=javascript> function transImg(obj,enable) { obj.filters.blendtrans.Apply(); obj.filters[0].enabled=enable; obj.filters.blendtrans.Play(); }</script><img src="/jishu/UploadPic/2006-6/200662002842874.gif" class="trans_img" onmouseover="transImg(this,0)" onmouseout="transImg(this,1)">
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

2，JS & IMG

运行代码框
<script language="JavaScript"> nereidFadeObjects = new Object();nereidFadeTimers = new Object();function nereidFade(object, destOp, rate, delta){if (!document.all)return if (object != "[object]"){ file://do this so I can take a string too 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><a href="http://www.cnbruce.com/" target="_blank"><img border="0" src=/jishu/UploadPic/2006-6/200662002842874.gif onMouseOut=nereidFade(this,50,10,5) onMouseOver=nereidFade(this,100,10,5) style="FILTER: alpha(opacity=50) " border=0></a>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

3，用htc文件，不用JS从而减轻工作量。
下载alpha.htc: http://www.cnbruce.com/js/alpha.htc

效果页查看：http://www.cnbruce.com/js/a.html

4，有点Flash的味道，一闪而过。

运行代码框
<SCRIPT language=Javascript type=text/javascript>function trains(id,text){document.all[id].innerHTML=' '+text}function trainpic(id,text){document.all[id].innerHTML='<img src="'+text+'.gif">'}function high(which2){theobject=which2;theobject.filters.alpha.opacity=0highlighting=setInterval("highlightit(theobject)",50)}function low(which2){clearInterval(highlighting)which2.filters.alpha.opacity=100}function highlightit(cur2){if (cur2.filters.alpha.opacity<100)cur2.filters.alpha.opacity+=15else if(window.highting)clearInterval(highlighting)}</SCRIPT><a href="http://www.cnbruce.com/"><IMG onmouseover="this.style.filter='alpha(opacity=100)';high(this)" onmouseout="low(this)" src="/jishu/UploadPic/2006-6/200662002842874.gif" border="0"></a>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

5，还有图片的“黑白转彩色”

运行代码框
<SCRIPT>function doTrans(filterCode) {imgObj.filters[0].apply();oImg.style.filter = filterCodeimgObj.filters[0].play();}</SCRIPT><SPAN id=imgObj onmouseleave='doTrans("gray")' style="FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); WIDTH: 1px" onmouseenter='doTrans("")'><IMG id=oImg style="FILTER: gray" src="/jishu/UploadPic/2006-6/200662002842874.gif"> </SPAN>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

（出处：