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;

但是，如果您使用的是背景位置，为什么不设置背景位置 x，并保持背景位置 y 不变？

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

jQuery 鼠标移动时的视差移动元素

jQuery parallax moving element on mouse move

jquery

parallax

onmousemove