function - 一个 div 的鼠标坐标显示在另一个 div 中 - jquery

Question

所以我有2个div：

<div class="ccc" style="position: relative; left: 100px; top: 50px; width: 200px; height: 150px; border: solid 1px;" oncontextmenu="return false;"></div>
<div class="ddd" style="position: relative; left: 200px; top: 100px; width: 100px; height: 40px; border: solid 1px;" oncontextmenu="return false;"></div>

http://jsfiddle.net/n8rna/

我需要以下内容：

• 我需要使用 class="ccc" 跟踪 div 内的鼠标位置/移动（坐标应该相对于这个 div，而不是相对于页面）

• 这些坐标需要显示在 div 内，class="ddd"

• 如果可能，坐标应在每 10 个像素处注册一次（10,10 - 20,10 等，而不是 1,1 - 2,1 - 3,1...）

我更喜欢 jquery 函数，但我也对其他方法（javascript 或其他方法）持开放态度。

Answer 1

<script>    
$(document).ready(function () {
    $('.ccc').mousemove(function (e) {
        $('.ddd').text("( " + (e.clientX - $(this).offset().left) + ", " + (e.clientY - $(this).offset().top) + " )");
    });
});
</script>

这是工作示例：小提琴