我已经四处寻找并询问了这个问题的解决方案,但到目前为止还没有运气。我希望有一个人可以帮助我。
我一直在根据我不久前找到的 [this][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();
}
有人可以给我建议吗?我真的很感激。谢谢。