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?

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

1 个答案: