鼠標移動jQuery視差移動元素

Question

我有一個小問題。我的代碼，我在鼠標移動元素也移動X和Y軸。我想要得到的是讓元素只在X軸上移動並停留在頁面的底部。

我嘗試刪除Y軸命令的所有字符串，它停止移動元素Y軸，但居中元素 - 它的主要問題，我希望它停留在底部。

$(document).ready(function() { 
    var movementStrength = 25; 
    var height = movementStrength/$(window).height(); 
    var width = movementStrength/$(window).width(); 
    $("#top-image").mousemove(function(e){ 
     var pageX = e.pageX - ($(window).width()/2); 
     var pageY = e.pageY - ($(window).height()/2); 
     var newvalueX = width * pageX * -1 - 25; 
     var newvalueY = height * pageY * -1 - 50; 
     $('#top-image').css("background-position", newvalueX+"px  "+newvalueY+"px"); 

    }); 
}); 

謝謝。

Answer 1

我不確定我是否明白你想要做什麼，但我認爲你正在試圖讓＃top-image div保留在頁面底部？如果是的話，你這條線圍繞它的Y軸：

var pageY = e.pageY - ($(window).height()/2); 
var newvalueY = height * pageY * -1 - 50; 

如果你想它的底部，它應該是這樣的：

var newValueY = e.pageY - yourImageHeight; 

但是，如果你正在使用背景位置，爲什麼不只是設置background-position-x，並保持background-position-y一樣？

$('#top-image').css("background-position-x", newvalueX + "px");