javascript - 当用户将鼠标悬停在图像上时，如何向用户实时显示图像上的 (x,y) 坐标？

Question

我有一个用户点击的方形图像/图表。

有没有办法在用户将鼠标悬停在图像上时(用户无需点击图像)实时向用户显示光标的 (x,y) 坐标？

Answer 1

应该这样做:

HTML

<img id="the_image" src="http://placekitten.com/200/200" />
<div id="coords"></div>

Javascript

$image = $('#the_image');
imgPos = [
    $image.offset().left,
    $image.offset().top,
    $image.offset().left + $image.outerWidth(),
    $image.offset().top + $image.outerHeight()
];

$image.mousemove(function(e){
  $('#coords').html((e.pageX-imgPos[0]) +', '+ (e.pageY-imgPos[1]));
});

演示(更新):http://jsfiddle.net/az8Uu/2/

备注:Throttling mousemove 处理程序也是一个好主意，以避免每 4 毫秒调用一次该函数。