1

感谢我在这里收到的建议，我解决了我的代码的一些问题，现在我有了：

window.onload = function(){

    var tooltip = $( '<div id="tooltip">' ).appendTo( 'body' )[0];

$( 'img' ).
    each(function () {
        var pos = $( this ).position(),
            top = pos.top,
            left = pos.left,
            width = $( this ).width(),
            height = $( this ).height(); 
        $( this ).
            mousemove(function ( e ) {
                var x = e.pageX - left,
                    y = e.pageY - top;

                $( tooltip ).html( 'x = ' + x + '<br/>y = ' + y ).css({
                    left: e.clientX + 10,
                    top: e.clientY + 10
                }).show();
            }).
            mouseleave(function () {
                $( tooltip ).hide();
            }); 

    });

};

不幸的是，Y 坐标不是整数！看图片：

在此处输入图像描述

差异与应有的差异是恒定的：-0.42。它从照片上边缘的 -0.42 到下边缘的 1198.58 不等。（图片高度为1200）。

我绝对可以将其汇总并解决问题，但这不是一个干净的解决方案。我想从一开始就做好。

这是CSS：

body { font:13px/1.4 Arial, sans-serif; margin:50px; background:gray; }
#tooltip { text-align:left; background:black; color:white; padding:3px 0; position:fixed; display:none; white-space:nowrap; }

这是 HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="javascript.js"></script></head>
</head>

<body>


<div id="content">
<h1>JS test</h1>
<img class="coords" src = "pic.jpg">

<p>Paragraph between images</p>


<img class="coords" src = "pic.jpg">
</div>

</body>
</html

非常感谢你的帮助！

戴维德

4

1 回答 1

3

要回答标题中的问题：在 CSS 中，Top 或 Left 可以定义为百分比或“em”等。然而，jQuery 总是返回像素，所以这可能是 jQuery 转换时获取浮点数而不是整数的原因，例如像素的百分比。

第二个问题，为什么它总是-0.42，如果没有 jsFiddle 或类似的东西，我不确定。编辑：但是您使用的是 .position() ，它给出了相对于parent的位置，而 e.pageX 是相对于page的。因此，e.pageY 在图像顶部（相对于页面顶部）可以是 0.42，而 image.position().top 可以是 0（相对于父级），因此结果 x 变为 -0.42。

您可能想要使用相对于页面的 .offset()！见http://api.jquery.com/offset/

于 2012-06-28T13:33:20.030 回答