$(document).ready(function() {
$("li span").mouseover(function(e){
var lengthx=$(this).css('background-position').split(' ')[0];//取background-position的X轴的数值
var lengthy=$(this).css('background-position').split(' ')[1];//取background-position的Y轴的数值
var lx;
if(lengthx.length==5){//判断X轴的长度
lx = lengthx.substring(0,3);//只取数字(如果有负号要带上负号)
}
else if(lengthx.length==6){
lx = lengthx.substring(0,4);
}
var ly=lengthy.substring(0,4);//我的例子的Y轴是同一个值,所以Y轴不用判断,直接取数字,若需要判断同X轴
var sum=ly*1-39*1;//拿到数值之后将Y轴的数值改变,
var positions=lx+"px"+" "+sum+"px";//计算后还要将px拼起来
$(this).css("background-position",positions);//最后赋给css
})
$("li span").mouseout(function(e){
var lengthx=$(this).css('background-position').split(' ')[0];
var lengthy=$(this).css('background-position').split(' ')[1];
var lx;
if(lengthx.length==5){
lx = lengthx.substring(0,3);
}
else if(lengthx.length==6){
lx = lengthx.substring(0,4);
}
var ly=lengthy.substring(0,4);
var sum=ly*1+39*1;
var positions=lx+"px"+" "+sum+"px";
$(this).css("background-position",positions);
})
});
.span1{width: 44px;background: url(images/index_global.png) -41px -124px no-repeat;/*background-position: ;*/}.span2{width: 36px;background: url(images/index_global.png) -87px -124px no-repeat;}.span3{width: 34px;background: url(images/index_global.png) -125px
-124px no-repeat;}
<ul class="pannerconect"><li><a href=""><span class="span1"></span><em>1</em></a></li><li><a href=""><span class="span2"></span><em>2</em></a></li><li><a href=""><span class="span3"></span><em>3</em></a></li></ul>