JQUERY移动背景与鼠标移动

Question

我有一个div类box1 ，它有以下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);
}

问题是如何使用mousemove();移动鼠标来移动背景mousemove(); jquery的方法？ 截至目前，我已经用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 css方法中的引号不正确。 应该是这样的：

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

此外，您需要将x和y与box1和top box1左边的距离进行box1 。 你可以减去box1的位置。 这可能是你想要的： https ： //codepen.io/chrisboon27/pen/rEDIC