Question

我正在尝试创建视差效果（效果很好），但是存在一个小问题。它不是视差相对于元素的当前位置，而是跳到0.我怎么能让视差影响它相对于当前位置的位置？

这是我的javascript：

$("#caveConfron").mousemove(function(e){
    var x = e.pageX - this.offsetLeft;

    var alreadyY = $("#caveConfron").css("backgroundPositionY");

    $("#caveConfron").css({"backgroundPosition":-(x/85)+"% 0%"});
});

我的元素CSS：

#caveConfron{
    width:242px;
    height:344px;
    border:5px solid black;
    background:url('../img/caveConfrontBg.jpg') no-repeat center top;
    position:relative;
}

以下是发生的事情的示例：http://jsfiddle.net/gNCjS/

Answer 1

经过多次实验，我发现了问题。

首先，当鼠标击中div的中心时，x的鼠标位置值应为“0”。所以这就是我在没有调整CSS的情况下所做的事情：

$("#caveConfron").mousemove(function(e){
    var x = e.pageX - this.offsetLeft;

    var reduce = $(this).width()/2;

    $("#caveConfron").css({"backgroundPosition":(((-x+reduce)/55)+50)+"% 0%"});
});

变量reduce获得div宽度的一半。然后，我得到变量x的负数，同时将其添加到reduce的值，所以如果x的鼠标位置超过div的一半，它将变为正数，因此中间将永久是“0”然后我划分55因此它在x轴上移动时不会偶尔跳跃，这将是一个小的改变（如果你想让跳跃变得更加充实，可以随意调整这个值;对于我的目的来说它很棒）。最重要的是，我添加50，因为在我的原始CSS中，背景的位置居中，巧合地将值（以数字表示）放在50％。

希望我的解释很好！

相对于背景当前位置的视差

1 个答案: