雪碧图x=0 时是点击前的样式, x=100px 时是点击后的样式,
点击前
img1
background: url("../images/images.png") no-repeat scroll 0 -94px;
img2
background: url("../images/images.png") no-repeat scroll 0 -188px;
img3
background: url("../images/images.png") no-repeat scroll 0 -282px;
点击后
img1, img2,img3分别是
background: url("../images/images2.png") no-repeat scroll 100px -94px;
background: url("../images/images.png") no-repeat scroll 100px -188px;
background: url("../images/images.png") no-repeat scroll 100px -282px;
如何编写代码?最好是jquery不是原生的
$('xxx').css('background-position-x', '100px');
点击这里看 demo
$().css("background-position", "100px");
不过直接操作CSS只是下下下策。应该是用 class 来控制,然后 $().addClass("actived")
$(selector).css('background-position', '100px -94px');
$("#img1").click(function(){
$(this).css("background-position", "100 -94px");
})
$("#img1").click(function(){
$(this).css({
"background-position": "100 -94px",
"background-image: "../images/images2.png"
});
})
也不知道自己的JQ有没有写错,也不知道你问的是不是这个,更不知道是不是伸手党,然后朋友说,截图吧,于是,我还是截图了……