页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

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

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<!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>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

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

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