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 attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
详解基于webpack搭建react运行环境
Jun 01 Javascript
详解vue组件通信的三种方式
Jun 30 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
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原型模式
2014/11/25 PHP
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
javascript 面向对象继承
2009/11/26 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
2020/04/08 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
Python的迭代器和生成器
2015/07/29 Python
python常用知识梳理(必看篇)
2017/03/23 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
Python内置加密模块用法解析
2019/11/25 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
Yahoo的PHP面试题
2014/05/26 面试题
幼儿园长自我鉴定
2013/10/17 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
预备党员表决心书
2014/03/11 职场文书
父母对孩子说的话
2014/04/12 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
员工家属慰问信
2015/03/24 职场文书
公司放假通知怎么写
2015/04/15 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书
2016新春团拜会致辞
2015/08/01 职场文书