js图片模糊切换显示特效的方法


Posted in Javascript onFebruary 17, 2015

本文实例讲述了js图片模糊切换显示特效的方法。分享给大家供大家参考。具体实现方法如下:

<html>

<title>一款图片模糊切换显示效果</title>

<body>

<script language="JavaScript1.1">

<!--

var slidespeed=3000

var slideimages=new Array("/images/m01.jpg","/images/m02.jpg","/images/m03.jpg","/images/m04.jpg")

var slidelinks=new Array("https://3water.com","https://3water.com","https://3water.com")

var imageholder=new Array()

var ie55=window.createPopup

for (i=0;i<slideimages.length;i++){

imageholder[i]=new Image()

imageholder[i].src=slideimages[i]

}

function gotoshow(){

window.location=slidelinks[whichlink]

}

//-->

</script>

<a href="javascript:gotoshow()"><img src="/images/csrcode.ico" name="slide" border=0 style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1)" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/></a>

<script language="JavaScript1.1">

<!--

var whichlink=0

var whichimage=0

var pixeldelay=(ie55)? document.images.slide.filters[0].duration*1000 : 0

function slideit(){

if (!document.images) return

if (ie55) document.images.slide.filters[0].apply()

document.images.slide.src=imageholder[whichimage].src

if (ie55) document.images.slide.filters[0].play()

whichlink=whichimage

whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0

setTimeout("slideit()",slidespeed+pixeldelay)

}

slideit()

//-->

</script>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 全角转换实现代码
Jul 17 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 Javascript
js实现单击图片放大图片的方法
Feb 17 #Javascript
js实现iframe自动自适应高度的方法
Feb 17 #Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 #Javascript
Jquery树插件zTree用法入门教程
Feb 17 #Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 #Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 #Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 #Javascript
You might like
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
JavaScript 数组循环引起的思考
2010/01/01 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
PyCharm设置SSH远程调试的方法
2018/07/17 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
Java中实现多态的机制
2015/08/09 面试题
工程师求职简历的自我评价分享
2013/10/10 职场文书
教师绩效工资方案
2014/02/01 职场文书
电子信息专业自荐书
2014/02/04 职场文书
《音乐之都维也纳》教学反思
2014/04/16 职场文书
保险公司开门红口号
2014/06/21 职场文书
党委班子对照检查材料
2014/08/19 职场文书
天堂的孩子观后感
2015/06/11 职场文书
基层工作经历证明
2015/06/19 职场文书
java如何实现socket连接方法封装
2021/09/25 Java/Android