javascript - 跟随鼠标位置的平滑移动效果

Question

我想创建一个非常简单的效果，当鼠标移动时移动背景图像。为此，我记录了鼠标位置并使用它来修改 css 属性:

$('#landing-content').mousemove(function(e){
    var amountMovedX = (e.pageX * -1 / 6);
    var amountMovedY = (e.pageY * -1 / 6);
    $(this).css('background-position', amountMovedX + 'px ' + amountMovedY + 'px');
}); 

http://jsfiddle.net/X7UwG/580/

我想让背景移动不那么激进，起初我虽然很好，但我们只需要增加等式中的除法因子以使较大的鼠标位置较低:

http://jsfiddle.net/X7UwG/581/

这种方法的主要问题是背景确实移动得更慢，但也非常不稳定(缓慢移动鼠标)。由于我们现在除以 100 而不是 6，结果的非小数部分在移动几个像素后发生变化(打开控制台并查看结果)。由于背景位置仅以非十进制值为准，因此运动不流畅。

我想我有两种方法可以解决这个问题，平滑移动之间的过渡，或者有一个不同的方程式将鼠标位置转换为背景差异位置，但我不知道如何解决它。

问题的第二部分是防止背景移动超过背景尺寸:

Answer 1

这样的事情对你有用吗？

我简单地将除数减半并增加背景图像的大小以说明运动并在主体上应用 margin:0 以隐藏 fiddle 中存在的空白

http://jsfiddle.net/X7UwG/582/

$('#landing-content').mousemove(function(e){
    var amountMovedX = (e.pageX * -1 / 50);
    var amountMovedY = (e.pageY * -1 / 50);
    $(this).css('background-position', amountMovedX + 'px ' + amountMovedY + 'px');
    console.log(amountMovedX);
});



body {
  margin:0px;
}
#landing-content {
  overflow: hidden;
  background-image: url(http://i.imgur.com/F2FPRMd.jpg);
  width: 100%;
  background-size: 115%;
  background-repeat: no-repeat;
  max-height: 500px;
  border-bottom: solid;
  border-bottom-color: #628027;
  border-bottom-width: 5px;
  padding:0px;
}