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");

jQuery视差移动元素在鼠标移动

1 个答案: