Javascript 平滑鼠标位置后的移动效果

我想创建一个非常简单的效果，当鼠标移动时移动背景图像。为此，Im记录鼠标位置并使用它修改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');
}); 

我想让背景运动不那么有攻击性，首先我想，让我们增加等式中的分割因子，以使较大的鼠标位置降低：

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

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

问题的第二部分是防止背景移动超过背景大小：

---

你喜欢这个工作吗

我只是将除数减少了一半，并增加了背景图像的大小以说明移动，并在主体上应用边距：0来隐藏小提琴中的空白

---

仍然会有起伏，试着在图像顶部非常缓慢地移动鼠标，你会得到我的意思是你可以进行一个过渡，使其更加平滑：

$('#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;
}