仿谷歌首页JS特效 -

linshouyi

浏览: 21045 次
性别:
来自: 北京

最近访客更多访客>>

bingzheaaa

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

仿谷歌首页JS特效

Google JavaScript CSS HTML Blog

前不久把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 onload="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();
}