图片马赛克变化效果Picmosaic的制作

王朝other·作者佚名 2008-05-20

宽屏版字体: 小|中|大|超大

一个图片的马赛克变化效果，这是我在一个网站上发现的，给人的冲击力真的很强，如果用在菜单上，肯定会有意想不到的效果，起初我还以为是flash，后来才知道是用了简短的几行脚本的结果，强烈推荐！

制作方法：

把下面的代码加入到<head>和</head>之间：

<!--

var num = 50

function chFilter() {

if(num > 2) {

num -= 1

img1.style.filter = "progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=" + num + ")"

setTimeout("chFilter()",5)

} else {

img1.style.filter = ""

}

//-->

</SCRIPT>

在<body>中加入如下代码：onload="img1.style.visibility='visible';chFilter()"

比如：<body bgcolor="#FFFFFF" text="#000000" onload="img1.style.visibility='visible';chFilter()">

在要变化的图片<img>中加入如下代码：

id=img1 style="FILTER: progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=50); VISIBILITY: hidden"

比如：<IMG id=img1 style="FILTER: progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=50); VISIBILITY: hidden" height=300 src="48.jpg" width=214 border=0>

这样，我们的效果就制作完成了