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常用字符串处理方法应用总结
May 22 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
详解vue-cli 脚手架 安装
Apr 16 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 Javascript
Element-UI+Vue模式使用总结
Jan 02 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
php缓存技术详细总结
2013/08/07 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
详解php比较操作符的安全问题
2015/12/03 PHP
php图片裁剪函数
2018/10/31 PHP
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
深入了解python中元类的相关知识
2019/08/29 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
基于python实现操作redis及消息队列
2020/08/27 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
英国著名书店:Foyles
2018/12/01 全球购物
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
旺仔牛奶广告词
2014/03/20 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
大学生作弊检讨书
2014/09/11 职场文书
购房个人委托书范本
2014/10/11 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
工程合作意向书范本
2015/05/09 职场文书
python​格式化字符串
2022/04/20 Python