JS图片滤镜本身转换结果，核心图切换代码

发布时间：2018-08-19 14:56:25 所属栏目：编程来源：站长网

导读：看看图片之间的滤镜转换进程，会帮你相识许多对象，滤镜的行使让页面能很平缓地在图和笔墨之间转换，图片可以恣意添加，并且每幅图都可做差异的链接。或者这就是此刻较量风行的图片切换殊效的根基雏形吧，原本实现起来云云简朴。由于是本身写的，以是滤镜

　　看看图片之间的滤镜转换进程，会帮你相识许多对象，滤镜的行使让页面能很平缓地在图和笔墨之间转换，图片可以恣意添加，并且每幅图都可做差异的链接。或者这就是此刻较量风行的图片切换殊效的根基雏形吧，原本实现起来云云简朴。由于是本身写的，以是滤镜种数、滤镜转换耽误时刻、图片数组、滤镜间的耽误等参数可以按照必要本身配置。

　　演示：

<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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys