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

Question

我希望我的主徽标在鼠标移动时改变.

我知道有几种方法可以实现这一点,并且想知道什么是稳定性,浏览器兼容性,效率和易于设置的最佳方式.

我发现的一些方法是:

• Javascript(jQuery)替换"src"属性.
• CSS使用背景和"悬停"

还有吗？什么是最好的？

Answer 1

底线

对于内容丰富的图像,您希望src获得HTML标记.您想要使用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功能.由于某种原因故意关闭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/

就个人而言,我认为对于内容丰富的图像,这是一个比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元素,并为语义上有意义的图像使用备用解决方案.