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では上または左をパーセンテージまたは'em'などとして定義できます。ただし、jQueryは常にピクセルを返すため、jQueryが変換するときに整数ではなく浮動小数点数を取得する原因となる可能性があります。ピクセルに対するパーセンテージ。

2番目の質問、なぜそれが常に-0.42であるのか、jsFiddleなどがないとわかりません。編集：ただし、e.pageXがページを基準にしているのに対し、親を基準にした位置を指定する.position（）を使用しています。したがって、e.pageYは画像の上部（ページの上部に対して）で0.42になる可能性があり、image.position（）。topは0（親に対して）になる可能性があるため、結果のxは-0.42になります。

ページに相対的な.offset（）を使用することをお勧めします。http://api.jquery.com/offset/を参照してください

于 2012-06-28T13:33:20.030 に答える