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 全兼容可高亮二级缓冲折叠菜单
Jun 04 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
浅谈js的异步执行
Oct 18 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
Vue页面骨架屏的实现方法
May 22 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
Angular value与ngValue区别详解
Nov 27 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
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
prototype class详解
2006/09/07 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
numpy中的ndarray方法和属性详解
2019/05/27 Python
基于Python实现简单学生管理系统
2020/07/24 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
浅析python函数式编程
2020/09/26 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
python的dict判断key是否存在的方法
2020/12/09 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
全球在线商店:BerryLook
2019/04/14 全球购物
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
八年级英语教学计划
2015/01/23 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
病假证明模板
2015/06/19 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript