使用jquery改变图像精灵?

发布于 2024-11-19 15:51:28 字数 538 浏览 4 评论 0原文

如果我使用包含三个图标的 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) 获取值?

谢谢!

nvm 我明白了:

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

If I'm using an image sprite with say a sprite.png containing three icons, how can I use jquery to on .click() to change the background x and y positions so that the background changes to another icon and how can I retrieve the values of the x, y positions?

So in other words if I had

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

How can I use jquery to turn it into

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

and how can I get the values, using jquery (-91px, 0px)?

Thanks!

nvm i got it:

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

流星番茄 2024-11-26 15:51:28

IMO 最好将背景样式分为两个属性:background-image 和background-position,如下所示:

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

要设置新位置,请使用 css 方法:

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

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

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

IMO better to split background style into two properties: background-image and background-position like this:

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

To set new position use the css method:

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

To get current values use the css method without the second parameter:

var position = $("selector").css("background-position").split(" ");
愛上了 2024-11-26 15:51:28

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

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

我认为将属性“background”分离为“background-image”和“background-position”会更好

try to use css method of jQuery like this:

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

i think that it will be better to separate property "background" to "background-image" and "background-position"

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文