JQUERY用鼠标移动背景 [英] JQUERY move background with mouse movement

问题描述

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

I have a div with class box1 and it has following css properties(I've given a background image of a random pic from the 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);
}

问题是我如何使用jcode的 mousemove(); 方法随着鼠标的移动来移动背景?到目前为止，我已经使用JQUERY解决了这一问题而且我似乎无法正常工作

The question is HOW DO I MOVE THE BACKGROUND with movement of mouse using mousemove(); method of jquery? as of now I've come this far with JQUERY and I can't seem to get it to work

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

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

I am trying to change the background position related to movement of mouse so it will be helpful if somebody could explain it if this is not how you do it..

推荐答案

jquery css方法中的引号不正确.它应该像:

You are having the quotes in jquery css method incorrectly. It should be like:

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

此外，您还需要对 x 和 y 进行校准，使其距 box1 的左侧和顶部 box1 分别.您可以练习 box1 的位置.这可能就是您想要的: https://codepen.io/chrisboon27/pen/rEDIC

Also you'd need to callibrate your x and y to distances from left of box1 and top box1 repectively. You could subract box1's positions. This might be what you want: https://codepen.io/chrisboon27/pen/rEDIC

这篇关于JQUERY用鼠标移动背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！