1

当我将鼠标悬停在另一个 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 个图像的画布。我想这是可能的，但我无法弄清楚。如果有人可以提供帮助，我将不胜感激。

4

1 回答 1

1

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

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

此图像是通过组合六个单独的 40x40 图标制作的。我使用 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) 的确切高度和宽度匹配。因此，如果我们有一个单独的 sprite 的组合图形，例如每个 35 像素宽 x 90 像素高，那么我们需要将 div#toons2 的高度和宽度设置为 35 的宽度和 90 的高度。这是一切都非常简单。

至于我们的 javascript，我们所做的只是在每次悬停时将 background-position-x 值调整 -40 像素，因为这是每个精灵的宽度。最初，我们看到...

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

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

background-position: -40px 0;

产生...

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

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

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

最后，将 background-position-x 设置为 -120px 会显示图像中的第四个图标，即...

四 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 位置，不需要更改。）

这样做。

这是小提琴（http://jsfiddle.net/UxKyY）。它包括原始条件以及建议的解决方案。

于 2013-04-10T04:52:56.267 回答