javascript - 使用 jQuery 将元素与鼠标位置对齐有一个偏移量

Question

我正在研究映射功能，将元素与鼠标位置对齐的 jQuery 脚本有一个似乎与页面间距匹配的偏移量。

这里是测试区http://champagnecentre.com/dev/directory/

jQuery(document).mousemove(function(e){
   jQuery('.directory-listing').css({top:e.pageY,left:e.pageX});
});

Answer 1

我相信@Bwolfing 是对的。 e.pageY和 e.pageX与文档有关。由于您的 div 嵌套了 top和 left位置是相对于父级的，这会导致偏移。

通过使用 .parent().offset()我们可以锻炼偏移量，在下面摆弄。我添加了 .area作为嵌套的置换 div .directory-listing , .mousemove功能可归因于$(document)...或 $('.area')... , 请注意 .mousemove最好写一个主题.on :

$(document).on({
  mouseenter: function(e) {
    // special effects
  },
  mousemove: function(e) {
    e.preventDefault();
    var target = $('.directory-listing'),
      d = target.parent().offset(), // this gets the offset positions
      dX = d.left + 6,
      dY = d.top + 12; // the +6 and +12 here are just to center the 'x'
    target.css({
      left: e.pageX - dX,
      top: e.pageY - dY
    });
  },
  mouseleave: function(e) {
    // special effects
  },
  click: function(e) {
    // special effects
  }
});

.area {
  position: absolute;
  left: 10%;
  top: 100px;
  width: 40%;
  height: 50%;
  background: #bbb;
  border: 1px solid #09f;
}
.directory-listing {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="area">
  <div class="directory-listing">X</div>
</div>