另一个div显示一个div的鼠标坐标 - jquery [英] mouse coordinates for one div displayed in another div - jquery

问题描述

所以我有2个div：

 < div class =cccstyle =position：relative; left： 100px; top：50px; width：200px; height：150px; border：solid 1px; oncontextmenu =return false;>< / div> 
< div class =dddstyle =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或其他方法）。
$（document）.ready（function（）{
$（'。ccc'）。mousemove（function（e）{
$（'。ddd'）。text（（ +（e.clientX - $（this）.offset（）。left）+，+（e.clientY - $（this）.offset（）。top）+））;
} ）;
}）;
< / script>

这里是工作示例：小提琴

So I have 2 divs:

<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/

And I need the following:

• I need to track the mouse position / movement inside of the div with class="ccc" (coordinates should be relative to this div, not to the page)

• those coordinates needs to be displayed inside of the div with class="ddd"

• if possible the coordinates should be registered at every 10th pixel (10,10 - 20,10 etc instead of 1,1 - 2,1 - 3,1...)

I would prefer jquery function for this, but I am also open for other approaches (javascript or something else).

解决方案

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

here is working example: fiddle

这篇关于另一个div显示一个div的鼠标坐标 - jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！