进行图像翻转的最佳方法是什么？

Question

我想让我的主徽标在鼠标移动时改变。

我知道有几种方法可以达到这个目的，并且想知道什么是稳定性，浏览器兼容性，效率以及易于设置的最佳方式。

我发现的一些方法是：

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

还有吗？ 什么是最好的？

Answer 1

底线

对于内容丰富的图片，您希望在HTML标记中包含src。您希望使用Javascript解决方案并将翻转图像放在属性中。

对于无内容的图像UI元素，特别是在网站上常见或重复的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功能。如果你留下一些<noscript>注释说他们可能无法获得完整的功能集，那些故意因某种原因故意关闭Javascript的人会知道。

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/

就我个人而言，我认为对于内容丰富的图像来说，这比CSS +两种背景图像解决方案更糟糕。您将HTML标记与显示的语义值分开。

如果你正在使用像UI元素这样的无内容图像，我认为这是最好的解决方案。

CSS解决方案：也没关系

另一个CSS选项可用，不涉及背景图像（如果你想在HTML中使用图像标签，那么CSS解决方案中最喜欢的选项，就像语义上有意义的图像一样）。

<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的一切。

底线：请勿将此功能用于内容丰富的图像。如果您必须远离Javascript，请将精灵用于UI元素，并为语义上有意义的图像使用备用解决方案。

Answer 2

#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 3

CSS使用背景和“悬停”

使用CSS精灵，换句话说，将两个图像合并为一个，然后使用css :hover来移动图像。

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

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

请参阅：http://css-tricks.com/css-sprites/

帮助生成图像和CSS的工具：

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

Answer 4

您应该使用:hover CSS规则。

Answer 5

CSS到目前为止。虽然您可能希望使用javascript来预先处理图像。

Answer 6

使用'sprites'List a part - sprites CSS

的图像翻转

Answer 7

在CSS中使用CSS sprites和：hover psuedo-class。原因如下：

1. 通过JS或通过CSS切换图像源将导致第一次鼠标悬停时“闪烁”，同时浏览器下载新图像。如果你使用精灵，它只是一个改变位置的图像，所以没有闪烁。

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

3. 如果用户禁用了JavaScript，则此功能正常。

4. 所有浏览器类型都支持它（桌面，无论如何，手机浏览器没有：悬停状态无论如何都不计算在内）。

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

Answer 8

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

或

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