使用jquery改变图像精灵?
如果我使用包含三个图标的 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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
IMO 最好将背景样式分为两个属性:background-image 和background-position,如下所示:
要设置新位置,请使用 css 方法:
要获取当前值,请使用不带第二个参数的 css 方法:
IMO better to split background style into two properties: background-image and background-position like this:
To set new position use the css method:
To get current values use the css method without the second parameter:
尝试像这样使用 jQuery 的 css 方法:
我认为将属性“background”分离为“background-image”和“background-position”会更好
try to use css method of jQuery like this:
i think that it will be better to separate property "background" to "background-image" and "background-position"