google的这效果怎么做的?

Question

此回复为自动发出,仅用于显示而已，并无任何其他特殊作用
楼主【zjstandup】截止到2008-06-27 14:05:47的历史汇总数据(不包括此帖)：
发帖数:318                发帖分:5616               
结贴数:317                结贴分:5596               
未结数:1                  未结分:20                 
结贴率:99.69 %            结分率:99.64 %            
值得尊敬

Answer 1

CSS控制图片的位置
http://www.google.cn/intl/zh-CN/images/toolbar_animation_20080606.png<div style="margin: 0.5em auto; background: transparent url(/intl/zh-CN/images/toolbar_animation_20080606.png) no-repeat scroll 0px 0px; width: 52px; height: 37px; cursor: pointer; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"></div><span style="white-space: nowrap;"><font style="color: rgb(68, 68, 68); text-decoration: none;" size="-1">视频</font></span>当鼠标放上去的时候，改变背景图片的位置
鼠标没有放上前：background: transparent url(/intl/zh-CN/images/toolbar_animation_20080606.png) no-repeat scroll 0px 0px;
鼠标略上去：    background: transparent url(/intl/zh-CN/images/toolbar_animation_20080606.png) no-repeat scroll -208px 5px;

Answer 2

鼠标放上去，切换张图片。鼠标移开，恢复原来图片，比如<img src='原来的图片' onmouseover="this.src='新的图片'"  onmouseout="this.src='原来的图片'">。图片是动态的，也可以有动态效果

Answer 3

保存下那个页面，你可以看到有一幅很多小图的大图片，这个叫做"CSS Spirites" 就是用js控制图片的位置实现的该效果，这种技术通常用在Web页面优化中，像很多大网站如www.126.com的背景都是是用这种技术实现的。

Answer 4

呵呵...做的挺漂亮的...乍一看上去,像是flash的

Answer 5

请问源码在哪，能不能帖个网址？？？是图片移动不错，但是还有图片的准确定位，加滑动效果，js 如何获取背景图片的位置？如果是单纯的img标签的图片要简单些

Answer 6

首先说明这是javascript实现的。你另存图片会发现他是多个图片在一张图片上的，那就意味着，他是通过变化图片的相对位置实现的。其实和一些鼠标覆盖到图片上产生翻转没太大区别，区别在于多几次setTimeout显示而已。