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 相关文章推荐
jQuery 解析xml文件
Aug 09 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
JS中的作用域链
Mar 01 Javascript
Vue中正确使用jQuery的方法
Oct 30 jQuery
js+html获取系统当前时间
Nov 10 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 Javascript
js 数组 fill() 填充方法
Nov 02 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 在线打包_支持子目录
2008/06/28 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
深入浅出php socket编程
2015/05/13 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
JavaScript this 深入理解
2009/07/30 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
原生js实现简单的模态框示例
2017/09/08 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
python快速查找算法应用实例
2014/09/26 Python
Python常用算法学习基础教程
2017/04/13 Python
Python在groupby分组后提取指定位置记录方法
2018/04/20 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
Python中求对数方法总结
2020/03/10 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
建筑文秘专业个人求职信范文
2013/12/28 职场文书
租房协议书范例
2014/10/14 职场文书
2014年售票员工作总结
2014/11/19 职场文书
销售经理工作检讨书
2015/02/19 职场文书
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
vue实现锚点定位功能
2021/06/29 Vue.js
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers