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控件的相对独立性
Sep 06 Javascript
一个网马的tips实现分析
Nov 28 Javascript
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 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
一个odbc连mssql分页的类
2006/10/09 PHP
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
php 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
围观tangram js库
2010/12/28 Javascript
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
Python编程中的for循环语句学习教程
2015/10/14 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
python关于调用函数外的变量实例
2019/12/26 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
控制工程专业个人求职信
2013/09/25 职场文书
十佳青年个人事迹材料
2014/01/28 职场文书
文明寝室申报材料
2014/05/12 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
运动会宣传稿100字
2015/07/23 职场文书
初中政治教学反思
2016/02/23 职场文书
如何通过cmd 连接阿里云服务器
2022/04/18 Servers