JS图片渐变效果

2008-08-28 15:27:10

刚一不小心从 uitimes.com上看到一个图片过渡效果,感觉比Flash做得好,就顺手抄下来,嘿嘿 不过,对不住各位浏览者, PJ的 HTML代码预览框似乎不好用,我全帖出来得了,自己新建一个HTML自己线下预览吧.呵呵 效果 [url=http://www.uitimes.com/]UITimes.com[/url] [code]<SCRIPT> <!-- // Randomizer rnd.today=new Date(); rnd.seed=rnd.today.getTime(); function rnd() { rnd.seed = (rnd.seed*9301+49297) % 233280; return rnd.seed/(233280.0); }; function rand(number) { return Math.ceil(rnd()*number); }; // end randomizer. --> </SCRIPT> <SCRIPT LANGUAGE=&#34;JavaScript&#34;> <!-- var imgUrl=new Array(); var imgLink=new Array(); var imgTitle=new Array(); var adNum=0; var imgPre=new Array(); var j=0; imgUrl[1]=&#34;http://www.uitimes.com/img/bigImg/uitimes@2008112205306.jpg&#34;; imgLink[1]=&#34;http://www.lemoons.com/Wiki/Topic.asp?ID=2064&#34;; imgTitle[1]=&#34;用彩绘迷失你的味觉&#34;; imgUrl[2]=&#34;http://www.uitimes.com/img/bigImg/uitimes@2008112204548.jpg&#34;; imgLink[2]=&#34;http://www.lemoons.com/Wiki/Topic.asp?ID=2096&#34;; imgTitle[2]=&#34;欧洲传统民族风摆件&#34;; imgUrl[3]=&#34;http://www.uitimes.com/img/bigImg/uitimes@2008112204831.jpg&#34;; imgLink[3]=&#34;http://www.lemoons.com/Wiki/Topic.asp?ID=2095&#34;; imgTitle[3]=&#34;环保X设计-日本设计师优秀作品展&#34;; imgUrl[4]=&#34;http://www.uitimes.com/img/bigImg/uitimes@2008112205133.jpg&#34;; imgLink[4]=&#34;http://www.lemoons.com/Wiki/Topic.asp?ID=2084&#34;; imgTitle[4]=&#34;Marcos Chin 插画作品&#34;; for (i=1;i<=4;i++) { if( (imgUrl[i]!=&#34;&#34;) &amp;&amp; (imgLink[i]!=&#34;&#34;) &amp;&amp; (imgTitle[i]!=&#34;&#34;) ) { j++; } else { break; } } function playTran(){ if (document.all) imgInit.filters[0].Apply(); imgInit.filters[0].Play(duration=2); } var key=0; function nextAd(){ if(adNum<j)adNum++ ; else adNum=1; if( key==0 ){ key=1; } else if (document.all){ playTran(); } document.images.imgInit.src=imgUrl[adNum]; titleInit.innerHTML=imgTitle[adNum]; theTimer=setTimeout(&#34;nextAd()&#34;, 5000); } function goUrl(){ jumpUrl=imgLink[adNum]; jumpTarget=&#39;_blank&#39;; if (jumpUrl != &#39;&#39;){ if (jumpTarget != &#39;&#39;) window.open(jumpUrl,jumpTarget); else location.href=jumpUrl; } } //--> </SCRIPT> <table width=&#34;100%&#34; border=&#34;0&#34; cellspacing=&#34;0&#34; cellpadding=&#34;0&#34;> <tr> <td><a href=&#34;javascript:goUrl()&#34;><img src=&#34;javascript:nextAd()&#34; style=&#34;FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0, wipeStyle=0, motion=&#39;forward&#39;);&#34; border=&#34;0&#34; name=&#34;imgInit&#34; width=&#34;276&#34; height=&#34;233&#34;></a></td> </tr> <tr> <td height=&#34;26&#34; align=&#34;center&#34; style=&#34;padding-top:5px;&#34;><b><a href=&#34;javascript:goUrl()&#34;><span id=&#34;titleInit&#34;></span></a></b></td> </tr> </table> [/code]