Question

我有一个类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" '
        });
    });
});

我正在尝试更改与鼠标移动相关的背景位置，这样如果有人可以解释它，如果不是这样的话会有帮助。

Answer 1

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

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

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

JQUERY用鼠标移动移动背景

1 个答案: