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

更新時間：2007年02月07日 00:00:00 作者：

<!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="9hxr9t9"   id="pshow"><img></div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

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

您可能感興趣的文章:

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

相關(guān)文章

微信小程序Page中data數(shù)據(jù)操作和函數(shù)調(diào)用方法
這篇文章主要介紹了微信小程序Page中data數(shù)據(jù)操作和函數(shù)調(diào)用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
點擊頁面任何位置隱藏div的實現(xiàn)方法
下面小編就為大家?guī)硪黄c擊頁面任何位置隱藏div的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-09-09
uniapp使用uni自帶websocket進行即時通訊詳細步驟
在開發(fā)程序過程中通信功能還是比較常用到的,下面這篇文章主要給大家介紹了關(guān)于uniapp使用uni自帶websocket進行即時通訊的詳細步驟,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2023-11-11
JavaScript封裝彈框插件的方法
這篇文章主要為大家詳細介紹了JavaScript封裝彈框插件的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
JavaScript創(chuàng)建對象_動力節(jié)點Java學(xué)院整理
這篇文章主要為大家詳細介紹了JavaScript創(chuàng)建對象的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
Javascript變量作用域詳解
這篇文章主要是對Javascript變量作用域進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
js前端處理跨域的九種方式
本文主要介紹了js前端處理跨域的九種方式,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-07-07
JavaScript中這6個新特性你都了解了嗎
作為一門不斷演進的語言,JavaScript每年都會引入新特性,這篇文章主要為大家整理了一些個人認為特別有用的新JavaScript特性,以及一些補充的實例代碼,希望對大家有所幫助
2024-01-01
KnockoutJS 3.X API 第四章之表單value綁定
Knockout是一個以數(shù)據(jù)模型（data model）為基礎(chǔ)的能夠幫助你創(chuàng)建富文本，響應(yīng)顯示和編輯用戶界面的JavaScript類庫。這篇文章主要介紹了KnockoutJS 3.X API 第四章之表單value綁定的相關(guān)資料,需要的朋友可以參考下
2016-10-10
WordPress中鼠標懸停顯示和隱藏評論及引用按鈕的實現(xiàn)
這篇文章主要介紹了WordPress中鼠標懸停顯示和隱藏評論及引用按鈕的實現(xiàn),順帶顯示和隱藏評論者信息的實現(xiàn)方法,非常實用,需要的朋友可以參考下
2016-01-01