鼠标点到图片上,图片就有渐变效果,这个看上去好像不错,但是它也有它的弊端,就是占CPU资源,而且下面的这些效果在firefox之类的浏览器中全都失效!但是我们还是可以欣赏一下的。
1,CSS,JS,IMG一个都不能少
<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="/logo/weisay.gif" class="trans_img" onmouseover="transImg(this,0)" onmouseout="transImg(this,1)">
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]"){ //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="/" target="_blank"> <img border="0" src="/logo/weisay.gif" onMouseOut=nereidFade(this,50,10,5) onMouseOver=nereidFade(this,100,10,5) style="FILTER: alpha(opacity=50) " border=0> </a>
3,有点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=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="/"> <IMG onmouseover="this.style.filter='alpha(opacity=100)';high(this)" onmouseout="low(this)" src="/logo/weisay.gif" border="0"> </a>
4,还有图片的“黑白转彩色”
<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="/logo/weisay.gif"> </SPAN>本文固定链接: https://www.weisay.com/blog/achieve-img-gradually.html | 威言威语
发表评论