前不久把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();
}
- 大小: 7.3 KB
分享到:
相关推荐
使用JavaScript实现Google导航菜单特效
JS CSS仿Google首页的动感导航菜单特效,鼠标放到下边的小点上,会跳出对应的介绍,点击会进入相关网址,不少朋友都比较喜欢类似的效果,奉献给大家研究。
NULL 博文链接:https://txbhcml.iteye.com/blog/944759
仿Google小工具jQuery拖动特效是一款不错的自定义的界面组件,适用于用户自定义拖动层布局。
模仿google搜索栏下面的图片切换功能,很漂亮的一个特效,共享了!
google首页特效。目前的。特效。非常好看
js特效脚本含源码和说明韩国GOOGLE首页动感导航本资源系百度网盘分享地址
这是10款绝对震撼的js特效图片展示源码,用谷歌浏览器查看效果更流畅。
超漂亮JS的DIV特效!!!(支持IE9.0,FF.GOOGLE),JS的DIV特效,DIV弹出特效,超漂亮的DIV特效
为您提供-HTML+CSS模板,JS广告代码,网页特效,导航菜单,焦点幻灯片代码,仿google图片效果图片展示相册和CSS技巧
js特效是一款能给人一种视觉效果,你可以看看这方面的需求。
自己不容易看懂的,并且加了完整的注释 希望能够帮到大家。里面的js代码写的不错,看完了 完全弄明白了其中原理,例如闭包 settimeout调用对象本身之类的 估计也需要时间的积累,google首页特效 希望大家喜欢
这里用jQuery.js库写了一个仿Google首页拖动的特效代码 <!DOCTYPE html> <html> <head> <meta http-equiv=content-type content=text/html; charset=utf-8/> <title>用JQUERY实现的仿...
经典的滑动门特效、树形导航菜单、仿Google首页导航菜单、流行的鼠标感应和可拖动的层。
JS仿谷歌浏览器鼠标右键菜单是一款仿Windows右键菜单栏特效。
仿Google Nexus 7网站左侧滑出导航菜单
内容索引:脚本资源,Ajax/JavaScript,导航菜单 Zcool网仿Google首页的动感导航菜单特效,鼠标放到下边的小点上,会跳出对应的介绍,点击会进入相关网址,不少朋友都比较喜欢类似的效果,奉献给大家研究。
js特效脚本含源码和说明Google创意动画Doodle代码本资源系百度网盘分享地址
js特效脚本含源码和说明Google粘土动画Doodle代码本资源系百度网盘分享地址