仿谷歌首页JS特效
?????? 前不久把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" name="code">function image(id, x, y, dir, step) {this.div = document.getElementById(id);//得到要显示的DIVthis.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;//变化的阶段控制在小于等于4top += 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();}?