Mousemove视差效果移动div的位置

我正在尝试创建一个轻微的视差效果（我不确定它是否真的构成了视差，但这是一个类似的想法）。 当鼠标移动时，有四个层以略微不同的速率移动。

我找到了一个很好的例子，提供了类似于我想要的东西：

http://jsfiddle.net/X7UwG/2/

它通过在鼠标移动时移动#landing-content div上的背景位置来实现此目的。

 $(document).ready(function(){ $('#landing-content').mousemove(function(e){ var x = -(e.pageX + this.offsetLeft) / 20; var y = -(e.pageY + this.offsetTop) / 20; $(this).css('background-position', x + 'px ' + y + 'px'); }); }); 

但是，我无法找到一种方法来使这个工作不是在background-position转换，而是在div位置转换。 例如position:relative; 和top:x使div本身移动一点点。

我的理由是div包含CSS动画元素，因此它需要是包含内部内容的div，而不是背景图像。

使用上述代码的任何解决方案？

Answer 1

如何使用jQuery.offSet（）代替？ 您可能想要调整数学/值，但我认为它应该让您朝着正确的方向前进。

 $(document).ready(function () { $('#layer-one').mousemove(function (e) { parallax(e, this, 1); parallax(e, document.getElementById('layer-two'), 2); parallax(e, document.getElementById('layer-three'), 3); }); }); function parallax(e, target, layer) { var layer_coeff = 10 / layer; var x = ($(window).width() - target.offsetWidth) / 2 - (e.pageX - ($(window).width() / 2)) / layer_coeff; var y = ($(window).height() - target.offsetHeight) / 2 - (e.pageY - ($(window).height() / 2)) / layer_coeff; $(target).offset({ top: y ,left : x }); }; 

JSFiddle： http ： //jsfiddle.net/X7UwG/854/