Javascript 视差效应的调整？

我已经四处寻找这个问题的解决方案，但到目前为止运气不好。我希望有人能帮助我

我一直在根据前一段时间找到的[本][1]教程研究视差效果。它做它应该做的，因为所有元素都会根据鼠标移动的位置左右移动。不过，如果可能的话，我想对它进行调整，使它根据鼠标的位置平滑地向左或向右滚动。就像现在一样，只有当鼠标移动时，它才会移动。我更愿意改变它，使它以设定的速度连续滚动给定宽度的空间，无论是左还是右，这取决于鼠标相对于中心的位置

以下是我到目前为止的代码，其工作原理与我上面链接的教程的第一部分相同：

var headerDiv = document.getElementById("header");

var image1Div = document.getElementById("image1");
var image2Div = document.getElementById("image2");
var image3Div = document.getElementById("image3");
var image4Div = document.getElementById("image4");

var headerDivHeight;
var canStartParallax = false;
var canPositionDivsVertically = true;

// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false

// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)

// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;

// Temporary variables to hold mouse x-y pos.s
var tempX = 0;
var tempY = 0;

var objectArray = new Array();

window.onload = function()
{
    showAllOfTheContent();

    headerDivHeight = headerDiv.offsetHeight;

    fillObjectArray();
    setimage1ToTransparent();
    positionDivs();

    turnOffPreloaderDotAnimation();
    objectAnimation();
}

function showAllOfTheContent()
{
    document.getElementById("content").setAttribute("class", "");
}

function fillObjectArray()
{
    var image1X = { getX: function() {return 0.5 * windowWidth + 50} };
    var image1Y = 10;
    var image1Factor = 0.0;
    var image1Array = new Array();
    image1Array.push(image1Div, image1X, image1Y, image1Factor);
    objectArray.push(image1Array);

    var image2X = { getX: function() {return 0.5 * windowWidth - 202} }; //position div from half width of the page
    var image2Y = 0;
    var image2Factor = 0.20; //parallax shift factor, the bigger the value, the more it shift for parallax movement
    var image2Array = new Array();
    image2Array.push(image2Div, image2X, image2Y, image2Factor);
    objectArray.push(image2Array);

    var image3X = { getX: function() {return 0.5 * windowWidth - -160} };
    var image3Y = 23;
    var image3Factor = 0.60;
    var image3Array = new Array();
    image3Array.push(image3Div, image3X, image3Y, image3Factor);
    objectArray.push(image3Array);

    var image4X = { getX: function() {return 0.5 * windowWidth + 50} };
    var image4Y = 60;
    var image4Factor = 1.0;
    var image4Array = new Array();
    image4Array.push(image4Div, image4X, image4Y, image4Factor);
    objectArray.push(image4Array);

    var image5Div = document.getElementById("image5");
    var image5X = { getX: function() {return 0.5 * windowWidth + 500} };
    var image5Y = 400;
    var image5Factor = 0.85;
    var image5Array = new Array();
    image5Array.push(image5Div, image5X, image5Y, image5Factor);
    objectArray.push(image5Array);
}

// Main function to retrieve mouse x-y pos.s

function getMouseXY(e)
{
      if (IE) { // grab the x-y pos.s if browser is IE
        tempX = event.clientX + document.body.scrollLeft
        tempY = event.clientY + document.body.scrollTop
      } else {  // grab the x-y pos.s if browser is NS
        tempX = e.pageX
        tempY = e.pageY
      }  
      // catch possible negative values in NS4
      if (tempX < 0){tempX = 0}
      if (tempY < 0){tempY = 0}  

      moveDiv(tempX, tempY);

      return true
}

function moveDiv(tempXsent, tempYsent)
{
    if (canStartParallax == true)
    {
        var tempXreceived = tempXsent;
        var tempYreceived = tempYsent;

        if (tempYreceived <= headerDivHeight) //limit the mouse over area
        {
            for (var i=0;i<objectArray.length;i++)
            {
                var yourDivPositionX = objectArray[i][3] * (0.5 * windowWidth - tempXreceived) + objectArray[i][1].getX();
                objectArray[i][0].style.left = yourDivPositionX + 'px';
            }
        }
    }
}

function positionDivs()
{
    var verticalParallaxFactorMultiplyNumber = 2; //the bigger this number, the vertical gap between header object animation will be bigger too

    for (var i=0;i<objectArray.length;i++)
    {
        objectArray[i][0].style.left = objectArray[i][1].getX() + "px";

        if (canPositionDivsVertically == true)
        {
            if ((objectArray[i][0] == image2Div) || (objectArray[i][0] == image3Div) || (objectArray[i][0] == image4Div))
            {
                objectArray[i][0].style.top = objectArray[i][2] - ((1 + (verticalParallaxFactorMultiplyNumber * objectArray[i][3])) * windowHeight) + "px";
            }
            else if ((objectArray[i][0] == image1Div))
            {
                objectArray[i][0].style.top = objectArray[i][2] + "px";
            }
            else
            {
                objectArray[i][0].style.top = objectArray[i][2] + ((1 + (verticalParallaxFactorMultiplyNumber * objectArray[i][3])) * windowHeight) + "px";
            }
        }
    }
}

function setimage1ToTransparent()
{
    image1Div.style.opacity = 0;
    image1Div.style.filter = "alpha(opacity=" + 0 + ")";
}

function objectAnimation()
{
    var objectAnimationDuration = 2000;

    //animate preloader
    $(preloaderAndStringContainerDiv).stop().animate({top: (-1 * windowHeight) + "px"}, objectAnimationDuration, function() {hidePreloader()});

    for (var i=0;i<objectArray.length;i++)
    {
        if ((objectArray[i][0] == image1Div))
        {
            $(objectArray[i][0]).stop().fadeTo(objectAnimationDuration, 1);
        }
        else
        {
            if ((navigator.userAgent.match(/iPad/i) != null) || (navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null)) //if using safari mobile device, never turn on parallax
            {
                $(objectArray[i][0]).stop().animate({top: objectArray[i][2] + "px"}, objectAnimationDuration, function() {canPositionDivsVertically = false});
            }
            else
            {
                $(objectArray[i][0]).stop().animate({top: objectArray[i][2] + "px"}, objectAnimationDuration, function() {canStartParallax = true; canPositionDivsVertically = false});
            }
        }
    }
}

function resizeHeader()
{
    positionDivs();
}

var headerDiv=document.getElementById（“header”）；
var image1Div=document.getElementById（“image1”）；
var image2Div=document.getElementById（“image2”）；
var image3Div=document.getElementById（“image3”）；
var image4Div=document.getElementById（“image4”）；
var headerDivHeight；
var CANSTARTPARLAX=假；
var CanPositionDivisVerticly=true；
//检测浏览器是否为IE。
//如果不是IE，我们假设浏览器是NS。
var IE=文档。全部？真：假
//如果NS，那就是！IE——然后设置鼠标捕捉
if（！IE）document.captureEvents（Event.MOUSEMOVE）
//设置为在MouseMove上使用getMouseXY函数
document.onmousemove=getMouseXY；
//用于固定鼠标x-y位置的临时变量
var-tempX=0；
var-tempY=0；
var objectArray=新数组（）；
window.onload=函数（）
{
ShowAllowtheContent（）；
headerDiv高度=headerDiv.离视；
fillObjectArray（）；
setImage1tTransparent（）；
positionDivs（）；
关断预失真（）；
objectAnimation（）；
}
函数showAllowtheContent（）
{
document.getElementById（“内容”）.setAttribute（“类”，“类”）；
}
函数fillObjectArray（）
{
var image1X={getX:function（）{return 0.5*windowWidth+50}；
var image1Y=10；
var-image1Factor=0.0；
var image1Array=新数组（）；
image1Array.push（image1Div、image1X、image1Y、image1Factor）；
push（image1Array）；
var image2X={getX:function（）{return 0.5*windowWidth-202}；//从页面的一半宽度定位div
var-image2Y=0；
var image2Factor=0.20；//视差偏移因子，值越大，视差移动的偏移量越大
var image2Array=新数组（）；
image2Array.push（image2Div、image2X、image2Y、image2Factor）；
push（image2Array）；
var image3X={getX:function（）{返回0.5*windowWidth--160}；
var-image3Y=23；
var Image3因子=0.60；
var image3Array=新数组（）；
image3Array.push（image3Div、image3X、image3Y、image3Factor）；
push（image3Array）；
var image4X={getX:function（）{返回0.5*windowWidth+50}；
var-image4Y=60；
var image4Factor=1.0；
var image4Array=新数组（）；
image4Array.push（image4Div、image4X、image4Y、image4Factor）；
push（image4Array）；
var image5Div=document.getElementById（“image5”）；
var image5X={getX:function（）{返回0.5*windowWidth+500}；
var image5Y=400；
var Image5因子=0.85；
var image5Array=新数组（）；
image5Array.push（image5Div、image5X、image5Y、image5Factor）；
push（image5Array）；
}
//检索鼠标x-y位置的主要功能
函数getMouseXY（e）
{
如果（IE）{//如果浏览器是IE，则抓取x-y位置
tempX=event.clientX+document.body.scrollLeft
tempY=event.clientY+document.body.scrollTop
}否则{//如果浏览器为NS，则抓取x-y位置
tempX=e.pageX
tempY=e.pageY
}  
//捕捉NS4中可能的负值
如果（tempX<0）{tempX=0}
如果（tempY<0）{tempY=0}
moveDiv（tempX，tempY）；
返回真值
}
函数moveDiv（tempXsent、tempYsent）
{
如果（CANStartParlax==true）
{
var tempXreceived=tempXsent；
var tempYreceived=tempYsent；
如果（tempYreceived当前mouseXY函数调用moveDiv例程，该函数被设置为mousemove事件的处理程序。因此，在移动鼠标之前，不会触发任何操作

相反，您希望使用mousemove来改变一些速度向量，并使用一些触发器进入一个连续循环（我建议从setInterval开始），该循环使用这个速度向量来调用moveDiv

因为你不想在悬停运动中发生这种情况（否则，当你从盒子上跳过时，它会疯狂地旋转），考虑在鼠标下沉进入循环，退出鼠标和鼠标离开的循环。< /P>
在这里制作动画时，请看一下使用requestAnimationFrame，这是较新浏览器中支持平滑动画渲染的一项功能，您提供了一个可重复执行的函数：

对于这些方法中的任何一种，我建议您为速度保留一个向量（通过mousemove事件调整）以及一个每帧更新的时间戳变量。您无法预测代码调用之间的延迟，因此为了保持一致，您应该使用从现在到最后一帧时间戳之间的增量来计算移动的距离。
哦，我想我已经设置了它，以便在收到答复时通知我……无论如何，非常感谢您的帮助回复。我将尝试看看我今天是否能让这个工作，并相应地发回。再次感谢。到目前为止仍然没有运气，所以我想我会发布一些例子。我想要的是一个自动向左或向右滚动的分层视差效果，这取决于鼠标靠近的边缘。其次，一些图像必须能够在给定的时间出现和消失这一点和整个事情必须动画尽可能平稳，尽可能少起伏。如果有人能帮助我，我将不胜感激。我将再次发布与示例的链接