当鼠标悬停在另一个div上时，在多个图像之间进行切换（使用css sprite）

Question

我使用jQuery在几个图像之间切换。代码如下：

var imgs=['img/image01.png', 
    'img/image02.png', 
    'img/image03.png', 
    'img/image04.png']; 
var $img = $('#toons'); 

$('#logo').on('mouseover', function() { 
    var current = imgs.indexOf($img.attr('src')); 
    $img.attr('src', imgs[++current] || imgs[0]); 
}); 

HTML：

<img id="toons" src="img/image01.png" /> 

随着每悬停在DIV＃标志形象的变化来回。虽然这很好，但我想知道是否可以在我的样式表中使用CSS精灵和背景图像实现同样的效果，只需一张画布就能显示出我需要的4幅图像。我想这是可能的，但我无法弄清楚。如果有人能帮忙，我会很感激。

Answer 1

让我们从一个简单的图形开始，它只是一个“数字条”。这是一个很好的形象来展示你所问​​的概念，最重要的是，我已经创建了它。这是...

numbers http://www.secretagentorange.com/_test/numbers.png

此图片是通过合并六个独立的40×40的图标制作。我使用PS Elements来完成它，但GIMP或许多其他图像编辑器可以完成这项工作。我们的单个位图由六个单独的图像组成，称为“精灵”。我们要做的是通过调整background-position-x CSS属性（并确保我们的“光圈”或显示窗口只有足够的大小以显示一个精灵），来操纵图像一次只显示一个精灵。

鉴于以下的javascript：

$('#logo2').on('mouseover', function() { 
    var current2 = $('#toons2').css("background-position").split(" "); 
    current2[0] = parseInt(current2[0].replace("px", ""), 10); 
    current2[0] = ((current2[0] > -120) ? current2[0] - 40 : 0); 
    $('#toons2').css("background-position", current2[0] + "px 0") 
}); 

和HTML：

<div id="toons2"></div> 
<div id="logo2">hover2</div> 

和CSS：

#toons2 { 
    width: 40px; 
    height: 40px; 
    background: transparent url('img/image01.png') no-repeat; 
    background-position: 0 0; 
} 

那么我们可以期待我们每次鼠标移到DIV＃LOGO2背景div＃toons2的图像将被更改。 （在这种情况下，前四个图标将按顺序显示并重复。）

div＃toons2的高度和宽度很重要：它必须与单个精灵（40x40）的精确高度和宽度相匹配。因此，如果我们有一个单独的精灵组合图形，例如宽度为35像素，高度为90像素，那么我们需要设置div＃toons2的高度和宽度，宽度为35，高度为90.这是都非常简单。

至于我们的JavaScript，所有我们正在做的是通过调整每次我们悬停时-40像素的背景位置x的值，因为这是每个精灵的宽度。最初，我们看到...

one http://www.secretagentorange.com/_test/number1-open.png

现在，我们第一次鼠标移到我们将-40像素调整我们的“数条”的x位置，有效地设置DIV＃toons2为CSS ...

background-position: -40px 0; 

这将产生...

two http://www.secretagentorange.com/_test/number2-open.png

下一次我们鼠标，backgroundPositionX WIL我是-80px，这将显示为...

three http://www.secretagentorange.com/_test/number3-open.png

最后，在设置背景位置-X到-120px显示图像中的第四个图标，即...

four http://www.secretagentorange.com/_test/number1-closed.png

让我们来看看的JavaScript。此行：

var current2 = $('#toons2').css("background-position").split(" "); 

获取div＃toons2的X和Y backgroundPosition值。

在我们的例子中，我们只关心与X值，如下所示：

current2[0] = parseInt(current2[0].replace("px", ""), 10); 

这里，我们抓住了第一个指数，剥出任何预期后缀和字符串转换为整数。现在我们有数字值了，我们可以很容易地操作它。

在我们的示例中，我们必须将图形向左移动40个像素以显示每个后续精灵，因此我们将从整数中减去40来做到这一点。但由于我们只希望看到四张图像，为了与海报的原始状态保持一致，我们检查以确保我们不会太过分。如果我们已经显示了第四个精灵，我们会将X值重置为零。下一行做到这一点：

current2[0] = ((current2[0] > -120) ? current2[0] - 40 : 0); 

我们的新X值已经到了，我们只需要将其插入backgroundPositionX属性：

$('#toons2').css("background-position", current2[0] + "px 0") 

，我们创建一个定义新值的字符串。 （第二个参数'0'是不需要更改的Y位置。）

就是这样。

这是fiddle (http://jsfiddle.net/UxKyY)。它包括原始条件以及建议的解决方案。