使用 jquery 更改图像精灵？

Question

如果我使用一个图像精灵，比如一个包含三个图标的 sprite.png，我如何使用 jquery 到 on.click() 来更改背景 x 和 y 位置，以便背景更改为另一个图标，我该如何检索x, y 位置的值？

所以换句话说，如果我有

background:url(img_navsprites.gif) -91px 0;

如何使用 jquery 将其变成

background:url(img_navsprites.gif) -51px 0;

以及如何使用 jquery (-91px, 0px) 获取值？

谢谢！

我明白了：

$(document).ready(function(){
    $(".housing").click(function(){
        $(this).css({
            "background-position":"0 0",
        });
    });
});

Answer 1

IMO 最好将背景样式拆分为两个属性：背景图像和背景位置，如下所示：

background-image: url(img_navsprites.gif);
background-position: 91px 0;

要设置新的 position 使用 css 方法：

$("selector").css("background-position", "-51px 0");

要获取当前值，请使用不带第二个参数的 css 方法：

var position = $("selector").css("background-position").split(" ");

Answer 2

尝试像这样使用 jQuery 的 css 方法：

$(this).css('background','url(img_navsprites.gif) -51px 0');
var valueOfCssproperty = $(this).css('background');

我认为将属性“背景”与“背景图像”和“背景位置”分开会更好