js模擬濾鏡的圖片漸顯效果

2019-11-21 02:17:01

字體：大中小

來源：轉載

供稿：網友

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>無標題文檔</title> <style> #pshow{margin:auto;width:180px;height:137px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);} </style> <script language="javascript" type="text/javascript"> /*ImageChange Start*/ var changeTime=2000,gradechangeTime=100,changeSpeed=10,imageCounter=4,nowImage,startOpacity; var imageLink=new Array() var filterObj,imageObj,changecontrol; function changeinit() {     filterObj=document.getElementById("pshow");     imageObj=filterObj.childNodes[0];     if(document.all)startOpacity=filterObj.filters[0].Opacity;     for(i=0;i<imageCounter;i++)        imageLink[i]="http://bbs.blueidea.com/images/blue/smilies/icon"+(i+8)+".gif";     nowImage=Math.floor(Math.random()*4);     imageObj.src=imageLink[nowImage];     changecontrol=setInterval("changeimg();",changeTime); } function changeimg() {     if(document.all)        {            clearInterval(changecontrol);            gradedescopt();        }     else{imageObj.src=imageLink[nowImage];}         nowImage==3? nowImage=0:nowImage++; } function gradeaddopt() {     if(startOpacity<100)       {           startOpacity+=changeSpeed;           startOpacity>100? startOpacity=100:{};           filterObj.filters[0].Opacity=startOpacity;           setTimeout("gradeaddopt();",gradechangeTime);       }     else{changecontrol=setInterval("changeimg();",changeTime);return;} } function gradedescopt() {     if(startOpacity>0)       {           startOpacity-=changeSpeed;           startOpacity<0? startOpacity=0:{};           filterObj.filters[0].Opacity=startOpacity;           setTimeout("gradedescopt();",gradechangeTime);       }     else       {           imageObj.src=imageLink[nowImage];           gradeaddopt();           return;       } } /*ImageChange End -------------------------------------------------------------*/ </script> </head> <body onLoad="changeinit();"> <div   class="iwvjtn8m0"   id="pshow"><img></div> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

呵呵，做網站的時候寫了一個模擬濾鏡圖片漸顯的效果，如果原來有過這樣的帖子，請幫我看下下面的問題，謝謝!
雖然可以運行，但是放到我的網站上就會在輪換圖片時cpu占用率瞬間增加15%左右，但是單獨瀏覽就不會，不知道怎么回事兒，請指點一下。

上一篇：如何用javascript去掉字符串里的所有空格

下一篇：select發展史超強第1/2頁