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与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
JS实现为表格动态添加标题的方法
Mar 31 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
Vue头像处理方案小结
Jul 26 Javascript
jQuery实现获取多选框的值示例
Feb 07 jQuery
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 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
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
php使用codebase生成随机数
2014/03/25 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
js 验证密码强弱的小例子
2013/03/21 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
学习Node.js模块机制
2016/10/17 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
美国美妆网站:B-Glowing
2016/10/12 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
资深生产主管自我评价
2013/09/22 职场文书
《大海那边》教学反思
2014/04/09 职场文书
法人任命书范本
2014/06/04 职场文书
机关作风建设整改方案
2014/10/27 职场文书
单身申明具结书
2015/02/26 职场文书
培训通知
2015/04/17 职场文书
教师节倡议书2015
2015/04/27 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
React中的Context应用场景分析
2021/06/11 Javascript