视差基于div中的鼠标位置

时间:2014-10-09 20:22:31

标签: javascript jquery html parallax greensock

我使用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);

任何帮助都将不胜感激。

0 个答案:

没有答案