JQUERY此举的背景，鼠标移动

问题描述：

我有box1类股利，它具有以下的CSS属性（我已经给从网上随机PIC的背景图像）JQUERY此举的背景，鼠标移动

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

我试图更改与鼠标的移动背景位置，这样它会如果有人是有帮助可以解释它，如果这不是你如何做到这一点..

''background-position'：Math.floor（x/2 + 20）+'px'+ Math.floor（y/2 + 20）+'px'' –

好的这是好的，但它并没有移动整个图像左或右，我试图达到视差效果？ –

答

您正在jquery css方法中引号错误。它应该是这样的：

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

而且你需要你的x和y callibrate到距离从左边的box1和顶部box1 repectively。你可以减去box1的职位。这可能是你想要的：https://codepen.io/chrisboon27/pen/rEDIC

JQUERY此举的背景，鼠标移动

相关推荐