首页 | 互联网 | IT动态 | 网络设备 | 服务器 | IDC | 安全 | Cisco | Windows | Linux | Java | .Net | Oracle | CIW | 华为 | 专题
IT技术 | 网页设计 | 平面设计 | 电子书下载 | 教学视频 | 方案 | 数字网校 | 直播室 | 虚拟考场 | 面授培训 | 搜索 | 博客 | 沙龙 | 论坛
 Dreamweaver | Flash
 Fireworks  | Frontpage
 HTML/CSS  | Javascript
 Photoshop  | CorelDraw
 AuotoCAD   | Illustrator
 Freehand
 3DMax    | Authorware
 Director   | Maya
 PP点点通 | 迅雷 | BT
 eMule | FlashGet | Nero
 Ghost | Outlook | IE
 Maxthon | Office
 QQ | MSN | 网易泡泡
 Skype | 雅虎通 | 新浪UC

最新文章

您现在的位置: 中国IT实验室 >> 网页设计 >> Javascript教程 >> 文章正文


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


网页教学网  2006-4-17  佚名  保存本文  推荐给好友  收藏本站


◆ 网页平面多媒体培训、认证考试免费咨询热线:400-700-5807   进入网络咨询平台

  一个图片的马赛克变化效果,这是我在一个网站上发现的,给人的冲击力真的很强,如果用在菜单上,肯定会有意想不到的效果,起初我还以为是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="48.jpg" width=214 border=0>

这样,我们的效果就制作完成了!
【责编:Yoyo】


 相关文章  推荐文章
dreamweaver制作圆角表格
JavaScript实现变色表格特效
JavaScript实现表格特效
JS特效围绕图片疯狂旋转的花朵
JS特效跟随鼠标的图片
js特效点击会变色哦!!
JavaScript加密解密的实现方法
减轻JavaScript测试和调试负担
未知高度的非表格垂直对齐
JavaScript的9个陷阱及评点
  文章评论