JS图片滤镜自己转换效果，焦点图切换代码

发布时间：2018-08-20 01:14:13 所属栏目：Asp教程来源：站长网

导读：看看图片之间的滤镜转换过程，会帮你了解很多东西，滤镜的使用让页面能很平缓地在图和文字之间转换，图片可以任意添加，而且每幅图都可做不同的链接。或许这就是现在比较流行的图片切换特效的基本雏形吧，原来实现起来如此简单。因为是自己写的，所以滤镜

　　看看图片之间的滤镜转换过程，会帮你了解很多东西，滤镜的使用让页面能很平缓地在图和文字之间转换，图片可以任意添加，而且每幅图都可做不同的链接。或许这就是现在比较流行的图片切换特效的基本雏形吧，原来实现起来如此简单。因为是自己写的，所以滤镜种数、滤镜转换延迟时间、图片数组、滤镜间的延迟等参数可以根据需要自己设置。

　　演示：

<HTML> <HEAD> <TITLE>图片滤镜</TITLE> <style> .30pt{color:#ce288c;font-size:30pt} </style> <SCRIPT language=<b>Java</b>Script> // 属性设置 var E_strIFaderTransType = 'reveal'; // 'reveal' | 'blend' var Filter_number = 23; // 滤镜种数 var change_time = 3.000; // 滤镜转换过程为3.0秒延迟 var wait_time = 5000; // 两种滤镜之间为5秒延迟 var obj_Timer; var count_temp = 0; //记录当前是第几幅图片 var Img_arry = new Array(); //图片数组 var E_ie4 = document.all?true:false; var E_nn4 = document.layers?true:false; function Filt_set() //设置滤镜 { if(!E_ie4 && !E_nn4) return; if(E_ie4) { var theImg = document.all['idImgFading']; if(theImg == null) return; with(document.all['idImgFading']) { style.filter = (E_strIFaderTransType == 'reveal')?'revealTrans':'blendTrans'; style.filter.duration = change_time; style.filter.transition = Filter_number; } } obj_Timer = window.setInterval('use_Filter()',wait_time); } function use_Filter() //滤镜的启动 { if(E_ie4) { with(document.all['idImgFading']) { if(E_strIFaderTransType == 'reveal') { filters(0).transition = Filter_number; } if(count_temp == (Img_arry.length - 1)) { count_temp = -1; } count_temp++; title = Img_arry[count_temp].sAlt; filters(0).apply(); src = Img_arry[count_temp].sImgUrl; filters(0).play(); } } else if(E_nn4) { if(count_temp == (Img_arry.length - 1)) { count_temp = -1; } count_temp++; document.images['idImgFading'].src = Img_arry[count_temp].sImgUrl; } } function obj_ClearTime() { window.clearInterval(obj_Timer); } window.onunload = obj_ClearTime;//取消<b>计时器</b>，释放系统资源 function Img_obj(sImgUrl,command,sAlt,sTarget) { this.sImgUrl = (sImgUrl == null)?'':sImgUrl; this.command = (command == null || command == '')?'http://www.veryhuo.com':command; this.sAlt = (sAlt == null)?'':sAlt; this.sTarget = (sTarget == null || sTarget == '')?'_self':sTarget; } </SCRIPT> <SCRIPT language=JavaScript>  </SCRIPT> </HEAD> <BODY > <font class=30pt> <center>滤镜特效</center> </font> <br><br><br> <center> <A href="#"> <IMG hspace=0 src="/uploads/common/images/p3.jpg" width=400 height=300 border=0 name=idImgFading> </A> </center> <SCRIPT language=JavaScript>Filt_set();</SCRIPT> </BODY> </HTML> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

用asp远程执行指令	asp解析rss
ASP采用jmail发送邮件	浅谈ASP.NET的Postbac