当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用javascript实现图片马赛克后显示并切换

Javascript
JS教程:浅谈ECMAScript自动插入分号
JavaScript教程:几种比较熟悉的编程习惯
JS实例:登陆失败后跳出框架打开
webdesignledger推选的2009年度最佳jQuery插件
javaScript教程:以实例方式学习call函数
JS教程:词法作用域和闭包
表单验证中时间起止 如何做到递归处理
JS实例教程:当心JavaScript代码陷阱
Firebug技巧:脚本调试,选项卡和CSS调试
学习javascript:牛人的讲座视频和PPT
Clearbox 3:很酷的仿Lightbox脚本
JavaScript教程:详细解析网页图片预览效果
JS代码实例:实现随机加载不同的CSS样式
国人开发的比较优秀的js框架:como js
Webjx收集10个最常用Ajax技术的实例教程
JavaScript教程:优化次数过多的循环
出色的jQuery导航菜单的14个英文教程
JS教程:学习笔记之JS类
JS教程:详细讲解JS节点知识
COM中获取JavaScript数组大小的代码

Javascript 中的 用javascript实现图片马赛克后显示并切换


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 203 ::
收藏到网摘: n/a

<script language="JavaScript1.1">
var slidespeed=3000
//specify images
var slideimages=new Array("http://www.blueidea.com/articleimg/upload/2006/3/5/2482150_1_7.jpg","http://www.blueidea.com/articleimg/upload/2006/3/5/2482150_2_1.jpg","http://www.blueidea.com/articleimg/upload/2006/3/5/2482150_3_2.jpg")
//specify corresponding links
var slidelinks=new Array("#","#","#")
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="http://www.blueidea.com/articleimg/upload/2006/3/5/2482150_1_7.jpg" name="slide" border=0 style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1)"></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>
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]