鼠标实现图片的渐有渐无

2006-01-13 00:05:13

1,CSS,JS,IMG一个都不能少 [code]<style type="text/css"> <!-- .trans_img {filter:alpha(opacity=30,enabled=1) blendtrans(duration=1); border:0 solid black} --> </style> <script language=javascript> function transImg(obj,enable) { obj.filters.blendtrans.Apply(); obj.filters[0].enabled=enable; obj.filters.blendtrans.Play(); } </script> <img src="http://www.cnbruce.com/images/cnrose/a.gif" class="trans_img" onmouseover="transImg(this,0)" onmouseout="transImg(this,1)"> [/code] 2,JS & IMG [code]<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=http://www.cnbruce.com/images/cnrose/a.gif onMouseOut=nereidFade(this,50,10,5) onMouseOver=nereidFade(this,100,10,5) style="FILTER: alpha(opacity=50) " border=0> </a> [/code] 3,用htc文件,不用JS从而减轻工作量。 [down=attachments/month_0601/sphw_alpha.rar]点击下载alpha.htc[/down]//重命名为:alpha.htc [code]<!--样式表部分--> <style type="text/css"> <!-- .coolalpha { behavior:url(alpha.htc); cursor:hand; filter:alpha(opacity=50); } --> </style> <!--图片实现部分--> <img class="coolalpha" src="http://www.cnbruce.com/images/cnrose/a.gif" border="0">[/code] 4,有点Flash的味道,一闪而过。[code]<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=0 highlighting=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+=15 else 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="http://www.cnbruce.com/images/cnrose/a.gif" border="0"> </a> [/code] 5,还有图片的“黑白转彩色”[code]<SCRIPT> function doTrans(filterCode) { imgObj.filters[0].apply(); oImg.style.filter = filterCode imgObj.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="http://www.cnbruce.com/images/cnrose/a.gif"> </SPAN> [/code]