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 相关文章推荐
js css后面所带参数含义介绍
Aug 18 Javascript
JavaScript设计模式初探
Jan 07 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 Javascript
jQuery快速高效制作网页交互特效
Feb 24 Javascript
jquery实现图片平滑滚动详解
Mar 22 jQuery
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
纯JavaScript实现实时反馈系统时间
Oct 26 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 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生成N个不重复的随机数实例
2013/11/12 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
PDO::exec讲解
2019/01/28 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
自写的一个jQuery圆角插件
2010/10/26 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
理解python多线程(python多线程简明教程)
2014/06/09 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
python实现狄克斯特拉算法
2019/01/17 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
2014年自我评价
2014/01/04 职场文书
难忘的一课教学反思
2014/04/30 职场文书
公司联欢会策划方案
2014/05/19 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
2014年采购工作总结
2014/11/20 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
信用卡收入证明范本
2015/06/12 职场文书
学习心得体会
2019/06/20 职场文书
MySQL系列之二 多实例配置
2021/07/02 MySQL