鼠标移动时的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，为什么不直接设置 background-position-x，并保持 background-position-y 相同呢？

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