保持视差不向后

Question

大家好，我正在研究这个片段http://jsfiddle.net/arobichaux/Qbrv9/29/，我基本上有一些问题。

首先，我希望它不能去过去的照片的开始(没有滚动到过去的左:0px;)，我也想知道什么是一个好方法来确保鼠标移动的长度在活动区域将采取他们所有的方式到图像的结束?图片宽度为5464px。

有什么建议吗?谢谢!

var strength1 = 1000;
var strength2 = 2000;
var strength3 = 5000;
$("html").mousemove(function(e){
    var pageX = e.pageX - ($(window).width() / 15);
    var pageY = e.pageY - ($(window).height() / 1);
    var newvalueX = 2* pageX * -1;
    var newvalueY = 1* pageY * -1;
  $('#background').css("background-position", (strength1 / $(window).width() * pageX * -1)+"px "+(strength1  / $(window).height() * pageY * -1)+"px");
    $('#middleground').css("background-position", (strength2 / $(window).width() * pageX * -1)+"px "+(1  / $(window).height() * pageY * -1)+"px");
    $('#foreground').css("background-position", (strength3 / $(window).width() * pageX * -1)+"px "+(1 / $(window).height() * pageY * -1)+"px");
});

Answer 1

jsFiddle演示

首先，对于第一次使用的用户来说，这是一个很好的问题。小提琴呈现得很好，我认为视差正变得越来越流行和相关的小时。

有两个问题我要解决，在我看来它们是次要的(你的代码工作得相当好- good job)。

这很简单，只需在计算出pageX后更改检查，如果小于0，则将其设置为0。非常直接的碰撞检测。

var pageX = e.pageX - ($(window).width() / 15);
if( pageX < 0 ) pageX = 0;

把它们一直放到图像的末尾

此问题是由于您将区域的宽度设置为小于图像宽度。值得注意的是，您的小提琴列出了strength3 = 5000，而它应该是

var strength3 = 5464;