用鼠标移动JQUERY移动背景

Question

我有一个带有类box1的div，它具有以下css属性(我给出了一个来自web的随机图片的背景图像)

.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" '
        });
    });
});

我试图改变与鼠标运动有关的背景位置，所以如果有人能解释一下，如果你不是这样做的，那将是有帮助的。

Answer 1

jquery方法中的引号不正确。它应该是：

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

此外，您还需要将您的x和y计算到box1和top box1的左边。你可以改变box1的立场。这可能是你想要的：https://codepen.io/chrisboon27/pen/rEDIC。