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

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

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

您可能感兴趣的文章:

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

javascript中的window.location.search方法简介
window.location.search方法是截取当前url中“?”后面的字符串，示例如下，感兴趣的朋友可以参考下
2013-09-09
javascript用defineProperty实现简单的双向绑定方法
这篇文章主要介绍了javascript用defineProperty实现简单的双向绑定方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
微信小程序实现下滑到底部自动翻页功能
这篇文章主要为大家详细介绍了微信小程序实现下滑到底部自动翻页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
JavaScript实现像雪花一样的Hexaflake分形
这篇文章主要介绍了JavaScript实现像雪花一样的Hexaflake分形，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-07-07
现代配置YAML对比JSON优势分析
这篇文章主要为大家介绍了关于现代配置指南中YAML对比JSON的优势分析说明，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步
2022-02-02
bootstrap-table组合表头的实现方法
本篇文章主要介绍了bootstrap-table组合表头的实现方法，非常具有实用价值，需要的朋友可以参考下
2017-09-09
JavaScript事件类型中UI事件详解
这篇文章主要介绍了JavaScript事件类型中UI事件详解的相关资料,需要的朋友可以参考下
2016-01-01
js去字符串前后空格5种实现方法及比较
如果写到注册的时候，用户输入空格，我们怎么来剔除空格呢，接下来与大家分享下经常使用的js，感兴趣的朋友可以参考下哈，希望可以帮助到你
2013-04-04
javascript截取字符串小结
本文章收藏了多种字符截取的方法，包括常用的js截取字符串，截取字符串函数及常用的截取使用，非常的简单实用，有需要的小伙伴可以参考下。
2015-04-04
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因，需要的朋友可以参考一下
2013-05-05

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具