如何动态改变background-position

HTML/CSS 前端客 8233℃ 2评论

由于要实现css sprite,显示一张图片的一部分,鼠标移上去时图片改变显示的部分这一需求,查了很多资料。解决方案如下:

$(".class").mouseover(function(){
    var bgPosition = $(this).css('background-position');//获取position
    if(typeof(bgPosition) == 'undefined'){//IE单独处理获取position
    bgPosition = $(this).css('background-positionX') + ' ' + $(this).css('background-positionY');
}
bgPosition=bgPosition.replace(/[px%]/g,"");//去掉后面的px单位去掉IE加入的%
bgPosition=bgPosition.split(" ") ;//分离xy

var x = bgPosition[0];
var y = bgPosition[1];

var position = x+"px "+ (parseInt(y)-141)+"px";//下移140
    //alert(position);
    $(this).css({backgroundPosition:position});
});
$(".class").mouseout(function() {
    var bgPosition = $(this).css('background-position');
    if(typeof(bgPosition) == 'undefined'){
    bgPosition = $(this).css('background-positionX') + ' ' + $(this).css('background-positionY');
}
bgPosition=bgPosition.replace(/[px%]/g,"");
bgPosition=bgPosition.split(" ") ;

var x = bgPosition[0];
var y = bgPosition[1];

var position = x+"px "+ (parseInt(y)+141)+"px";
    //alert(position);
    $(this).css({backgroundPosition:position});

});

参考资料: 如果想单独取background-position的X值或Y值,IE里可以通过私有属性background-positionX或者background-positionY取得,但是非IE浏览器无法通过这个属性取得。 查阅了参考资料,整理出如何获得XY的通用方法,我在IE6 IE7 IE8 FF3 Opera Chrome上测试没有问题。

函数一、先通过jQ取得XY。

(function($) {
jQuery.fn.backgroundPosition = function() {
    var bgPosition = $(this).css('background-position');
    if(typeof(bgPosition) == 'undefined') {
      return $(this).css('background-positionX') + ' ' + $(this).css('background-positionY');
    }else{
      return bgPosition;
    }
};
})(jQuery);
bgPosition=bgPosition.split(" ") //转成字符串数组
parseInt(bgPosition) // 字符串再转成数字可计算

函数二、单独取它们的X值或Y值

X值:$(’#Element’).backgroundPosition().split(” “)[0];

Y值:$(’#Element’).backgroundPosition().split(” “)[1];

扩展:background-position 用法详细介绍

版权所有,转载请注明:前端客 » 如何动态改变background-position
喜欢 (10)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
(2)个小伙伴在吐槽
  1. 试一试
    菜是原罪2018-04-26 11:13 回复
  2. 效果不错
    神佑骑士2015-10-30 11:16 回复