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 Demo

首先，第一次使用者的问题非常好。小提琴很好地呈现，我认为视差在一小时内变得越来越流行和相关。

我将解决两个问题，在我看来它们很小（你的代码工作得很好 - 工作很好）。

没有滚动到左边：0px;

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

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

将所有方式带到图片的末尾

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

var strength3 = 5464;

保持视差不会后退

1 个答案: