3

大家好，我正在处理这个片段http://jsfiddle.net/arobichaux/Qbrv9/29/，我基本上遇到了一些问题。

首先，我希望它不能超过照片的开头（不能滚动到左​​边：0px；），而且我想知道什么是确保实时鼠标移动长度的好方法区域会将它们一直带到图像的末尾？图像宽 5464 像素。

有什么建议么？谢谢！

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");
});
4

1 回答 1

2

jsFiddle 演示

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

我将解决两个问题，在我看来它们是次要的（您的代码工作得相当好 - 干得好）。

没有滚动到左边：0px；

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

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

将它们一直带到图像的末尾

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

var strength3 = 5464;
于 2013-04-02T19:11:05.840 回答