如何跟随鼠标移动相反的方向？

Question

我想有一个div跟随鼠标坐标相反的方向并在div .box内。当您移动鼠标时，红色框应略微向相反方向移动，因此它看起来像一种视差效果。现在它将继续你的鼠标速度，这不是我想要的。我希望盒子稍微移动，所以你会看到盒子向相反的方向移动一点。我想将盒子对准鼠标中心。

我已经有一个代码脚本，让红色框跟随你的鼠标移动，但不知道如何进行上述工作。

$(document).ready(function(){
  $('div.container').on('mousemove',function(e){
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        $('div.box').css({'left': x, 'top': y});
  });
});

http://codepen.io/anon/pen/zBrkGa

Answer 1

尝试将top更改为bottom，将left更改为right可以解决您的问题，例如，

$('div.box').css({'right': x, 'bottom': y});

$(document).ready(function() {
  $('div.container').on('mousemove', function(e) {
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    $('div.box').css({
      'right': x,
      'bottom': y
    });
  });
});

.container {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  border: 1px #000 solid;
  position: relative;
}
.box {
  width: 50px;
  height: 50px;
  border: 1px #000 solid;
  position: absolute;
  right: 200px;
  background: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <div class="box"></div>
</div>

已更新，用于修复100px范围内的框，但有一些延迟

$(document).ready(function() {
  $('div.container').on('mousemove', function(e) {
    var x = (e.pageX - this.offsetLeft);
    var y = (e.pageY - this.offsetTop);
    if(x<100||x>200||y>200||y<100) return false;
    setTimeout(function() {
      $('div.box').css({
        'right': x,
        'bottom': y
      }).text(x+','+y);
    }, 500);
  });
});

.container {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  border: 1px #000 solid;
  position: relative;
}
.box {
  width: 50px;
  height: 50px;
  border: 1px #000 solid;
  position: absolute;
  right: 200px;
  background: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <div class="box"></div>
</div>

Answer 2

$(document).ready(function(){
 $('div.container').mousemove(function(e){
  let mouseX = e.pageX;
  let mouseY = e.pageY;

   $(this).children('.box').css({
    'transform': 'translate(' + mouseX / -80 + 'px ,' + mouseY / -80 + 'px)
   })
  });
});

负数将使对象或div（.box）移动与鼠标移动相反的方向