Jquery 防止视差向后移动

大家好，我正在编写这段代码，我基本上遇到了一些问题

首先，我希望它不能超过照片的开头（不要向左滚动：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");
});

首先，对于第一次使用的用户来说，这是一个非常好的问题。小提琴演奏得很好，我认为视差正变得越来越受欢迎，而且越来越重要

我将解决两个问题，我认为它们是次要的（您的代码工作得相当好，做得很好）

不向左滚动：0px

这很简单，只需在计算后更改对

pageX

的检查，如果小于0，则将其设置为0。非常直接的碰撞检测

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

---

谢谢，这是一个很大的帮助，我能够得到它我想要的方式…不得不花一些时间来重新设置它的动画等等…但现在我有一些实际的困难实现到JOOMLA从JS小提琴。我已经找到了如何调用JSQuery，但是当我加载页面时，这两个div只显示在彼此的上方，而不会像在JSFIDLE中那样重叠。我不得不省略

div{position:absolute；top:0；left:0；right:0；bottom:0；}

我让它工作了，但出于某种原因，当我试着穿上JOOMLA时，我必须从CSS窗口中取出代码，否则它会使我的模板变得很粗糙……当我这样做时，两个图像不再重叠……即使我用绝对、左0像素和上0像素定义……你知道为什么会这样吗？如果你去groovefootwear.com并点击TESTER链接…你会看到我的意思…你对我有什么想法吗，真的很坚持！谢谢！：）@user2162042-这可能是因为在小提琴中只有这3个div，而在您的主站点中，有许多div。您应该为3个div指定一个唯一的类名，然后使用该类名在样式中引用。看到这个演示使用类名为那些3：啊，谢谢！刚刚做了更改并将其联机..修复了问题，但现在底部菜单栏（粉红色）消失了？我想它可能被显示覆盖了，所以我尝试添加一个名为3dspacer的css元素，高度为600，以至少向下推它，但不起作用……你知道为什么吗？似乎在所有其他页面上，joomla文章都向下推了底部栏，但出于某种原因，这个没有起作用？

var strength3 = 5464;