仿谷歌主页JS特效
日期：2014-05-16 浏览次数：20423 次
仿谷歌首页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" 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();
}
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
