做图像翻转的最佳方法？

Question

我希望我的主标志在鼠标移动时发生变化。

我知道有几种方法可以实现这一点，并且想知道稳定性，浏览器兼容性，效率以及设置的简易性的最佳方法。

我发现一些方法是：

• 的Javascript（jQuery的）更换 “src” 属性的。
• 使用CSS背景和 “悬停”

还有吗？ 什么是最好的？

Answer 1

底线

对于内容-FUL图片，你想在HTML标记的src。您想要使用Javascript解决方案并将翻转图像放入属性中。

对于无内容图片的UI元素，尤其是那些在网站中很常见或重复的元素，直接的CSS解决方案将是最好的（因此您不必在每次调用时重新声明图像位置）。在CSS解决方案中，精灵是最好的，因为它们不需要预加载开销。

JavaScript解决方案

HTML：

<img src="/img/one.jpg" data-rollover="/img/two.jpg" /> 

在jQuery中：

$(function(){ 
    $('img.rollover').hover(function(){ 
    var e = $(this); 
    e.data('originalSrc', e.attr('src')); 
    e.attr('src', e.attr('data-rollover')); 
    }, function(){ 
    var e = $(this); 
    e.attr('src', e.data('originalSrc')); 
    }); /* a preloader could easily go here too */ 
}); 

样品实施：http://jsfiddle.net/dtPRM/1/

优点：这很容易;这说得通;一旦你建立了你的图书馆，它可以用最少的附加标记工作。

缺点：需要Javascript和开销加载jQuery库。

可能是最好的选择。如果您的用户在翻转相关的情况下使用浏览器（可能是这种情况），他们具有运行此选项的Javascript功能。由于某种原因，故意将Javascript关闭的人可能会想到，如果您留下一点点<noscript>说明，他们可能无法获得完整的功能集。

CSS的解决方案：最佳

HTML：

<div id="img1" /> 

CSS：

div#img1 { 
    height: 400px; 
    width: 300px; 
    background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;} 
div#img1:hover { 
    background-position: top right;} 

样品实施：http://jsfiddle.net/dtPRM/5/

就个人而言，我认为对于内容FUL图像，这是比CSS +两个背景图片soluti更糟糕的选择上。您将HTML标记与显示语义值分开。

但是，如果您使用的是像UI元素这样的无内容图片，那么在我看来这是最好的解决方案。

CSS的解决方案：还行吧

另一个CSS选项可用，不涉及背景图片（CSS的解决方案中是优选的，如果你想拥有在HTML图像标记，如对语义上有意义的图像） 。

<div class="rollover"> 
    <img class="rollover" src="http://dummyimage.com/600x400/000/fff" /> 
    <img class="" src="http://dummyimage.com/600x400/fff/000" /> 
</div> 

CSS（我在这里使用了:not伪选择，但它是很容易避免使用它，我也觉得我得到的类名语义向后）：

div.rollover img:not(.rollover) {display: none;} 
div.rollover:hover img:not(.rollover) {display: inline;} 
div.rollover:hover img.rollover {display: none;} 

样品实现：http://jsfiddle.net/dtPRM/2/

优点：与以前的CSS解决方案相比，语义上明智的将所有信息放在样式表中。

缺点：需要额外的标记。

评论：根据浏览器是否需要，可以自动预加载这一个。

底线：如果因为绝对需要IE2兼容性或非JS支持而无法使用选项（1）

的CSS unsolution：滚开

我提到这一点，只是因为你在问题中提到它。我不会使用它。

HTML：

<div id="img1" /> 

CSS：

div#img1 { 
    height: 400px; 
    width: 600px; 
    background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;} 
div#img1:hover { 
    background-image: url('http://dummyimage.com/600x400/fff/000');} 

样品实施：http://jsfiddle.net/dtPRM/4/

优点：广泛兼容;你真正需要支持的是背景图像和悬停。

缺点：语义上怪异的把图像放在CSS中并集中在那里。使未来的修改更加困难。也就是说，如果你有一个保证翻转图像的场景，它很可能是一个非内容图像（例如，一个UI元素），在这种情况下，CSS可能会在语义上（可能）比正规形象。请参阅下面的精灵注释。

其他方面的不足：你必须要小心申报图像的高度和宽度（一个很好的做法，无论如何，但它可能会很麻烦，当你只想把事情做好）。在移动浏览器上查看可能会异常处理CSS背景图像的用户。

更弊端：如果要叠加在它上面预加载，你将可以使用JavaScript和莫名其妙地选择倾倒能元素，按照这个速度，你不妨使用JavaScript为了一切。

底线：不要为内容FUL图像使用。如果您必须远离Javascript，请使用用于UI元素的精灵和用于语义上有意义的图像的备用解决方案。

Answer 2

您应该使用:hover CSS规则。

Answer 3

CSS远。尽管您可能想用JavaScript预缓存图像。使用“精灵” List a part - sprites CSS

Answer 4

图像翻转两个图像组合成一个，然后使用CSS :hover到图像偏移。

使用CSS的一个优点是，即使关闭了JavaScript，它也能正常工作。

使用单个图像的一个优点是它可以避免额外的HTTP请求。

参见：http://css-tricks.com/css-sprites/

工具，以帮助生成图像和CSS：

• http://csssprites.com/
• http://css-sprit.es/

Answer 5

CSS使用背景和“悬停”

使用CSS子画面，换句话说

Answer 6

$('#div1').hover(function(){ 
    this.style.color='white'; 
},function(){ 
this.style.color='black; 
}); 

或

$('#div1').onmouseover()... 
$('#div1').onmouseout()... 

Answer 7

#btn{ 
width:100px; height:100px;/*the dimensions of your image*/ 
background:url(bird.png) left top no-repeat; 
} 
#btn:hover{ 
background-position:left bottom;/* pixel references can be used if prefered */ 
} 

使用图像像这样：

注：避免JS图像替换为您将承担很短的图像加载时间，如果图像不前缓存。

希望这有助于兄弟！

W.

Answer 8

使用CSS精灵和：悬停伪类CSS。这里的原因：

1. 交换或者通过JS或通过CSS图像源将导致，而新的图像通过浏览器下载的第一个鼠标在“闪烁”。如果你使用精灵，它只是一个改变位置的图像，所以不要眨眼。

2. 单个图像可减少HTTP请求，从而使网站加载速度更快。

3. 它适用于用户禁用JavaScript的情况。

4. 它受到所有浏览器类型（桌面，反正，没有：悬停状态的手机浏览器不支持此功能）的支持。

的更多信息：http://css-tricks.com/css-sprites/