根据鼠标移动将背景位置x px移动到左/右（从背景位置开始：中心）

Question

我试图创建一个jQuery脚本，根据鼠标将背景位置x px更改为左侧或右侧运动（从背景位置开始：中心）。

这是我到目前为止有：http://jsfiddle.net/multiformeingegno/KunZ4/530/

$("#salone").bind('mousemove', function (e) { 

    $(this).css({ 
     backgroundPosition: e.pageX + 'px ' + e.pageY + 'px' 
    }); 

}); 

问题是，它不会从背景位置开始：中心当我移动鼠标的背景图片从鼠标的位置开始，并显示白色背景。 我希望它根据鼠标移动从中心移动到左/右。还要调整背景位置变化的速度（动画？）。

Answer 1

只是减去你想从开始位置：

backgroundPosition: (e.pageX-650) + 'px ' + (e.pageY-410) + 'px' 

改变速度调整系数鼠标位置：

backgroundPosition: (e.pageX*2-650) + 'px ' + (e.pageY*2-410) + 'px' 

是双快。

http://jsfiddle.net/KunZ4/538/

对于你可能只是把图片的路径，将其追加到一个无形的图像和获取宽度和高度的后台中心的计算。

var url = $('#myDiv').css('background-image').replace('url(', '').replace(')', '').replace("'", '').replace('"', ''); 
var bgImg = $('<img />'); 
bgImg.hide(); 
scope = this; 
bgImg.bind('load', function() 
{ 
    scope.height = $(this).height(); 
    scope.width = $(this).width(); 
}); 
$('#myDiv').append(bgImg); 
bgImg.attr('src', url); 

var centerX = scope.width/2; 
var centerY = scope.height/2; 

不，您可以使用centerX和centerY来居中您的图像。

接过中心计算从这里： How do I get background image size in jQuery?