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

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以隐藏小提琴中存在的空白

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;
}