我使用Greensock进行了视差功能,效果非常好。我的问题是我只知道如何找到pageX值。因此,页面边距设置为自动pageX会因用户而异。所以我尝试编写一个函数,根据父div找到x值的新起点,但我似乎无法获得新的起点变量来处理视差函数。
$('#viewPort').mouseover(function(e){
var parentOffset = $(this).offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
return relX;
});
function doParallax(){
var backLayer = document.getElementById('bgGrid');
var middleLayer = document.getElementById('graphs');
var frontLayer = document.getElementById('notes');
$('#viewPort').mousemove(
function(event){
var bMouse = event.relX / 3;
TweenLite.to(backLayer, 1, { css:{left:'-' + bMouse + 'px'}, overwrite:true } );
var mMouse = event.relX / 0.205;
TweenLite.to(middleLayer, 1, { css:{left:'-' + mMouse + 'px'}, overwrite:true } );
var fMouse = event.relX / 0.5;
TweenLite.to(frontLayer, 1, { css:{left:'-' + fMouse + 'px'}, overwrite:true } );
$('#train').css({'left':event.clientX - 200});
}
);
}
setTimeout('doParallax()', 2000);
任何帮助都将不胜感激。