Question

当我将鼠标悬停在另一个div上时，我正在使用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＃logo上，图像会来回变化。虽然这很好用，但我想知道我是否可以在我的样式表中使用CSS精灵和背景图像来实现相同的效果，只需要一个带有我需要的4个图像的画布。我想这是可能的，但我无法弄清楚。如果有人可以提供帮助，我会很感激。

Answer 1

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

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

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

鉴于以下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，我们所做的就是每次悬停时将background-position-x值调整-40像素，因为这是每个精灵的宽度。最初，我们看到......

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

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

background-position: -40px 0;

产生......

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

下次我们鼠标悬停时，backgroundPositionX将为-80px，显示为...

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

最后，将background-position-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)。它包括原始条件以及建议的解决方案。

悬停另一个div时多个图像之间的变化（使用css sprites）

1 个答案: