互联网观察 网站建设 网站运营 网上创业 电子商务 建站软件 建站软件教程 网站开发 网页制作 收藏本站
建站常识 | 域名 | 主机 | 网上开店 | 搜索引擎优化 | 网站推广 | 网络赚钱 | 站长经验 | 个人建站 | 网站设计 | 网页特效 | wap网站

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

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

制作方法:
把下面的代码加入到<head>和</head>之间:
<SCRIPT language=JavaScript>
<!--
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="http://www.webjx.com/htmldata/2005-02-24/48.jpg" width=214 border=0>

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




上一篇:改变图片链接的边框颜色
下一篇:制作仿 Flash 的图片渐变效果
相关分类
网页制作 (4121)
  html教程 (591)
  css教程 (546)
  Dreamweaver教程 (1006)
  JavaScript教程 (834)
  网页制作技巧 (378)
  网页特效 (766)
 



版权所有 Copyright© 2006 黑马建站宝典 联系方式:heima123#gmail.com