请问如何实现一张静态物品图片，当鼠标指针放在上面时，无延时替换为同种物品gif格式的360度展示图？多谢赐教！

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

Meteor

JSLint - a Javascript code quality tool

jsFiddle

D3.js

WebStorm

推荐书目

Javascript 权威指南第 5 版

Closure: The Definitive Guide

这是一个创建于 4514 天前的主题，其中的信息可能已经有所发展或是发生改变。

简单来讲，就是如何实现当鼠标停在一张格式为jpg或png的图片上时，瞬时将图片替换为gif格式的图片。或者，有没有可能不进行替换，使gif图片常态下处于静止状，停止在第一帧上，当鼠标移到图片上时，才进行动态显示呢？请高手们不吝赐教，多谢！

图片

当鼠标

gif

9 条回复 1970-01-01 08:00:00 +08:00

qiayue

PRO

2013-06-01 16:37:34 +08:00

两张图，一张常态
一张gif，在:hover时显示

qiuai

PRO

2013-06-01 16:58:50 +08:00

预加载,然后hover切换就可以

lleon

2013-06-01 17:55:04 +08:00

一张gif
上半部分为静态
下半部分为动画
:link {background-position: left top; ...}
:hover {background-position: left bottom; ...}

Tiny

2013-06-02 14:56:04 +08:00

可以查看一下，虾米音乐首页顶部LOGO旁边的android和ios的图标

kramon

2013-06-02 18:14:37 +08:00

@Tiny 多谢，就是这个意思，可惜源代码里看不到。

itcook

2013-06-02 18:21:11 +08:00

.mobile-gallery {
width: 140px;
height: 39px;
float: left;
margin-top: 10px;
text-indent: -9999px;
background-repeat: no-repeat;
background-image: url(http://img.xiami.com/static/img/common/b1.gif);
}
.mobile-gallery:hover {
background-image: url(http://img.xiami.com/static/img/common/b2.gif);
}

虾米的，善用firebug或者浏览器的调试功能~

itcook

2013-06-02 18:31:14 +08:00

另外补充下，虾米这种会出现鼠标移上去可能动态gif还未载入的情况(没有任何显示)，@lleon 的方法更好：
1. 减少一次请求
2. 一般不会发生鼠标hover时没有显示的情况

当然这种实现方式的需要视觉设计稍微多花点功夫(时间成本略略高点)，上半部分(以@lleon 的方式说明，当然也可以是下半、左半、右半等等与动态部分不重合的任意方位)每一帧都是完全相同的图形来实现伪静态效果，动态部分就是不想同的图形来实现动态效果。

然后就是通过backgroud-positon来进行一般、hover的图片定位了。

记得图片最好进行压缩减肥 :)

itcook

2013-06-02 18:42:10 +08:00

再次补充：原谅我没有认真审题……Orz

360度产品展示的图片都不会太小，这种情况下还是用两张图片比较好，为了保证良好的用户体验，预加载是必须的，另外mouseover时可以调用Javascript事件判断动态图是否加载完成，如果没有加载完成，再调用loading事件，loading完成后再显示动态图。

kramon

2013-06-02 21:48:19 +08:00

@itcook 非常感谢你的耐心解答，非常受用！