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

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

　　演示：

<HTML> <HEAD> <TITLE>图片滤镜</TITLE> <style> .30pt{color:#ce288c;font-size:30pt} </style> <SCRIPT language=JavaScript> // 属性设置 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;//取消计时器，释放系统资源 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 > <center>滤镜特效</center> <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> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

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

由 dawei

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

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

由 dawei

相关文章

使用softaculous创建WordPress临时站点

怎样建网站更有利于网站推广和优化？

中企动力带你了解舌尖上的餐饮网站设计趋势

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀