javascript - JQUERY用鼠标移动背景

我有一个类为box1的div，它具有以下CSS属性（我从网络上获得了随机图片的背景图片）

.box1{
  height:600px;
  width:600px;
  position:absolute;
  background-position:center center;
  background-size:150%;
  top:0;
  left:0;
  background-image:url(http://www.slx-photographic.co.uk/wp-content/uploads/2014/03/Photography-Camera-HD-Wallpaper1.jpg);
}

问题是如何使用jquery的mousemove();方法通过鼠标移动来移动背景？截至目前，我已经在JQUERY方面走了这么远，我似乎无法使它正常工作

$(document).ready(function(){
    $(document).mousemove(function(e){
      var x = e.pageX;
      var y = e.pageY;

        $(".box1").css({
           ' background-position':'  x/2 +"20px" , y/2 + "20px" '
        });
    });
});

我正在尝试更改与鼠标移动相关的背景位置，因此如果有人不能解释它，这将很有帮助。

最佳答案

您在jquery css方法中使用的引号不正确。应该是这样的：

$(".box1").css({
  "background-position": x/2 + "20px ," +  y/2 + "20px"
});

另外，您还需要将x和y分别校准为距box1左侧和顶部box1的距离。您可以减去box1的位置。这可能是您想要的：https://codepen.io/chrisboon27/pen/rEDIC