Question

我正在使用以下php代码

<img class="hover" src="img/large_eyeball.png" style="margin-left:100px;">
<div id="co"></div>

<script type="text/javascript" src="js/1.7.2.jquery.min.js"></script>
<script type="text/javascript" src="js/hover_text.js"></script>

以下是hover_text.js的内容：

$('.hover').mousemove(function(e) {
    $('#co').text('x: '+ e.clientX + 'y: ' + e.clientY);    
});
$('.hover').click(function(e) {
    alert('x: '+ e.clientX + 'y: '+ e.clientY);
});

使用上面的代码，我能够获得像素位置，但相对于屏幕的最左边和最顶部;我希望相对于图像边界得到它。

Answer 1

您可以通过使用offset()功能实现此目的。（然而，可能有更好更直接的方法。）

＆＃13;

$('.hover').mousemove(function(e) {
    var out = 'x: '+ (e.clientX - $(this).offset().left) + 'y: ' + (e.clientY - $(this).offset().top);
    $('#co').text(out);    
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="hover" src="//placehold.it/100x100" style="margin-left:100px;">
<div id="co"></div>

＆＃13;

如何获取相对于特定div / image（不是屏幕）的像素位置

1 个答案: