1

我正在尝试创建视差效果（效果很好）但是有一个小问题。它不是相对于元素当前位置的视差，而是跳转到 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/

4

1 回答 1

0

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

首先，当鼠标碰到 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%。

希望我的解释是好的！

于 2013-05-26T23:35:12.643 回答