js模拟滤镜的图片渐显效果

时间：2020-10-12 19:21:38|栏目：JavaScript代码|点击：次

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

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

呵呵，做网站的时候写了一个模拟滤镜图片渐显的效果，如果原来有过这样的帖子，请帮我看下下面的问题，谢谢!
虽然可以运行，但是放到我的网站上就会在轮换图片时cpu占用率瞬间增加15%左右，但是单独浏览就不会，不知道怎么回事儿，请指点一下。

上一篇：微信小程序 image组件遇到的问题

栏目：JavaScript代码

下一篇：JS array 数组详解

本文标题：js模拟滤镜的图片渐显效果

本文地址：http://www.codeinn.net/misctech/10273.html

更多JavaScript代码

JavaScript代码

js模拟滤镜的图片渐显效果

阅读排行

推荐教程