js实现九宫格图片半透明渐显特效的方法
本文实例讲述了js实现九宫格图片半透明渐显特效的方法。分享给大家供大家参考。具体实现方法如下:
<html> <title>九宫格图片半透明渐显效果</title> <body> <STYLEtype=text/css>.invisible{ FILTER:alpha(opacity=0) } </STYLE>
<SCRIPTlanguage=JavaScript1.2> <!-- functionhigh(which2){ theobject=which2 highlighting=setInterval("highlightit(theobject)",50) } functionlow(which2){ clearInterval(highlighting) which2.filters.alpha.opacity=0 } functionhighlightit(cur2){ if(cur2.filters.alpha.opacity<100) cur2.filters.alpha.opacity+=10 elseif(window.highlighting) clearInterval(highlighting) } //--> </SCRIPT> <TABLEborderColor=#999999cellSpacing=8cellPadding=0width=302 border=0><TBODY> <TR> <TDwidth=90background=text1.gifbgColor=#db4d0e height=90><Ahref=""><IMG class=invisibleonmouseover=high(this)onmouseout=low(this) src="/images/m01.jpg"border=0width=180pxheight=135px></A></TD> <TDwidth=90background=text2.gifbgColor=#ff9f07><A href="/"><IMG class=invisibleonmouseover=high(this)onmouseout=low(this) src="/images/m02.jpg"border=0width=180pxheight=135px></A></TD> <TDwidth=90background=text3.gifbgColor=#ff9f07><A href=""><IMGclass=invisible onmouseover=high(this)onmouseout=low(this)src="/images/m03.jpg" border=0width=180pxheight=135px></A></TD></TR> <TR> <TDbackground=text4.gifbgColor=#ff9f07><A href="/"><IMG class=invisibleonmouseover=high(this)onmouseout=low(this) src="/images/m04.jpg"border=0width=180pxheight=135px></A></TD> <TDbackground=text5.gifbgColor=#a5d523><A href="/"><IMG class=invisibleonmouseover=high(this)onmouseout=low(this) src="/images/m05.jpg"border=0width=180pxheight=135px></A></TD> <TDbackground=text6.gifbgColor=#c56e19><A href="/"><IMG class=invisibleonmouseover=high(this)onmouseout=low(this) src="/images/m06.jpg"border=0width=180pxheight=135px></A></TD></TR> <TR> <TDbackground=text12.gifbgColor=#ff9f07><A href="/"><IMG class=invisibleonmouseover=high(this)onmouseout=low(this) src="/images/m07.jpg"border=0width=180pxheight=135px></A></TD> <TDbackground=text8.gifbgColor=#c56e19><A href="/"><IMG class=invisibleonmouseover=high(this)onmouseout=low(this)src="/images/m08.jpg" border=0width=180pxheight=135px></A></TD> <TDbackground=text7.gifbgColor=#c56e19><A href="/"><IMG class=invisibleonmouseover=high(this)onmouseout=low(this) src="/images/m09.jpg"border=0width=180pxheight=135px></A></TD></TR></TBODY></TABLE> </body> </html>