根據鼠標移動將背景位置x px移動到左/右（從背景位置開始：中心）

我試圖創建一個jQuery腳本，根據鼠標將背景位置x px更改爲左側或右側運動（從背景位置開始：中心）。根據鼠標移動將背景位置x px移動到左/右（從背景位置開始：中心）

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

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

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

});

問題是，它不會從背景位置開始：中心當我移動鼠標的背景圖片從鼠標的位置開始，並顯示白色背景。我希望它根據鼠標移動從中心移動到左/右。還要調整背景位置變化的速度（動畫？）。

來源

2014-11-25 MultiformeIngegno

只是減去你想從開始位置：

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?

來源

2014-11-25 17:14:13 RodrigoDela

是的，我已經使用暫時，但我敢肯定有一種方法來計算圖像的中心，然後添加或從中減去像素。 – MultiformeIngegno 2014-11-25 17:19:15

好的速度！現在有一個函數來計算圖像的中心（而不是手動設置數字開始）將是完美的 – MultiformeIngegno 2014-11-25 17:21:55

改編的答案。希望這對你有用。歡呼聲， – RodrigoDela 2014-11-25 17:31:52

根據鼠標移動將背景位置x px移動到左/右（從背景位置開始：中心）

回答

相關問題