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

所以我有两个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>

我需要以下信息：

• 我需要使用class=“ccc”跟踪div内的鼠标位置/移动（坐标应与此div相对，而不是与页面相对）

• 这些坐标需要用class=“ddd”显示在div内部

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

我更喜欢jquery函数，但我也支持其他方法（javascript或其他方法）

$（文档）.ready（函数（）{
$（'.ccc'）.mousemove（函数（e）{
$（'.ddd'）.text（“+（e.clientX-$（this.offset（）.left）+”，“+（e.clientY-$（this.offset（）.top）+”）；
});
});

---

下面是一个工作示例：

获取相对于.ccc元素的坐标：获取页面坐标并减去元素坐标

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