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模拟滤镜的图片渐显效果

微信小程序Page中data数据操作和函数调用方法
这篇文章主要介绍了微信小程序Page中data数据操作和函数调用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
点击页面任何位置隐藏div的实现方法
下面小编就为大家带来一篇点击页面任何位置隐藏div的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
uniapp使用uni自带websocket进行即时通讯详细步骤
在开发程序过程中通信功能还是比较常用到的,下面这篇文章主要给大家介绍了关于uniapp使用uni自带websocket进行即时通讯的详细步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-11-11
JavaScript封装弹框插件的方法
这篇文章主要为大家详细介绍了JavaScript封装弹框插件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
JavaScript创建对象_动力节点Java学院整理
这篇文章主要为大家详细介绍了JavaScript创建对象的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
Javascript变量作用域详解
这篇文章主要是对Javascript变量作用域进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
js前端处理跨域的九种方式
本文主要介绍了js前端处理跨域的九种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-07-07
JavaScript中这6个新特性你都了解了吗
作为一门不断演进的语言,JavaScript每年都会引入新特性,这篇文章主要为大家整理了一些个人认为特别有用的新JavaScript特性,以及一些补充的实例代码,希望对大家有所帮助
2024-01-01
KnockoutJS 3.X API 第四章之表单value绑定
Knockout是一个以数据模型（data model）为基础的能够帮助你创建富文本，响应显示和编辑用户界面的JavaScript类库。这篇文章主要介绍了KnockoutJS 3.X API 第四章之表单value绑定的相关资料,需要的朋友可以参考下
2016-10-10
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
这篇文章主要介绍了WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现,顺带显示和隐藏评论者信息的实现方法,非常实用,需要的朋友可以参考下
2016-01-01

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具