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

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>