前不久把W3C的有关知识系统的学习了一下,浏览谷歌首页的时候无意中看到了这个JS效果,于是把图片下载下来,自己写了一个类似的效果,把JS代码贴出来,以供大家一起学习交流。图片所有权归google公司所有,转载请注明转载出处:http://linshouyi.iteye.com/blog/652872
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>模仿google特效</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=gbk">
<script type="text/javascript" src="images.js"></script>
<style type="text/css">
.div {
width: 46px;
height: 37.4px;
overflow: hidden;
background: url('toolbar_animation_20090618.png') no-repeat;
background-position: 0px 0px;
}
</style>
</head>
<body οnlοad="load()">
<table>
<tr>
<td>
<div id="d1" class="div"></div>
</td>
<td>
<div id="d2" class="div"></div>
</td>
<td>
<div id="d3" class="div"></div>
</td>
<td>
<div id="d4" class="div"></div>
</td>
<td>
<div id="d5" class="div"></div>
</td>
<td>
<div id="d6" class="div"></div>
</td>
<td>
<div id="d7" class="div"></div>
</td>
</tr>
</table>
</body>
</html>
images.js
function image(id, x, y, dir, step) { this.div = document.getElementById(id);//得到要显示的DIV this.x = x;//定位图片x位置 this.y = y;//定位图片y位置 this.dir = dir;//图片变化的方向,true为正方向,false为反方向 this.step = step;//图片变化的阶段,共5个阶段(5副图片变化) var image = this; this.div.onmouseover = function () { image.dir = true;//鼠标over,修改方向为正方向 }; this.div.onmouseout = function () { image.dir = false;//鼠标out,修改方向为负方向 }; image.changeImage = function () { var top = image.y; if (image.dir) { image.step++; } else { image.step--; } if (image.step > 4) { image.step = 4;//变化的阶段控制在小于等于4 top += 5; //添加图片最后向下移动效果 } if (image.step < 0) { image.step = 0;//变化的阶段控制在大于等于0 } image.div.style.backgroundPosition = image.x * image.step + "px " + top + "px";//定位图片要显示的部分 window.setTimeout(image.changeImage, 100);//每100毫秒监控图片的方向是否变化 }; } function load() { new image("d1", -53.6, 0, false, 0).changeImage(); new image("d2", -53.6, -37.4, false, 0).changeImage(); new image("d3", -53.6, -37.4 * 2, false, 0).changeImage(); new image("d4", -53.6, -37.4 * 3, false, 0).changeImage(); new image("d5", -53.6, -37.4 * 4, false, 0).changeImage(); new image("d6", -53.6, -37.4 * 5, false, 0).changeImage(); new image("d7", -53.6, -37.4 * 6, false, 0).changeImage(); }