5

クリック相対左上隅の画像座標を取得する必要があります。したがって、画像の左上隅は条件付き0,0であり、次に最初のピクセル1,0 ... 2..0などです。このロジックを取得するために使用できるJavaScript構造に何かありますか？

4

4 に答える 4

6

あなたはこのようなことを試すことができます：-

  <img id="board" style="z-index: 0; left: 300;position: absolute; top: 600px" align=baseline     border=0 hspace=0 src="design/board.gif">

  function findPos(obj){
  var curleft = 0;
  var curtop = 0;

  if (obj.offsetParent) {
do {
    curleft += obj.offsetLeft;
    curtop += obj.offsetTop;
   } while (obj = obj.offsetParent);

return {X:curleft,Y:curtop};
 }
}

 findPos(document.getElementById('board'));
 alert(curleft);
 alert(curtop);
于 2012-11-27T15:17:57.663 に答える
5

ここにあなたを助けることができるリンクがあります

http://www.emanueleferonato.com/2006/09/02/click-image-and-get-coordinates-with-javascript/

于 2012-11-27T15:20:26.837 に答える
2

Jquery $（'＃id'）。offset（）を使用してウィンドウを基準にした要素の位置を取得するか、$（'＃id'）。position（）を使用して親要素を基準にした要素のtop、leftを取得します。また、この質問を見て、純粋な（バニラ）javascriptで答えを提供してください。これがjsFiddleの例です

HTML：

<div id="xRes">Top:<span></span></div>
<div id="yRes">Left:<span></span></div>

<input type="button" id="getPos" value="Get X,Y"/>

<img src="http://www.katimorton.com/wp-content/uploads/2012/05/mr-happy.jpg" id="myImg"/>

JS：

$(document).ready(function () {

    $('#myImg').draggable();

    $('#getPos').on('click', function(){

        var xRes = $('#xRes span'),
            yRes = $('#yRes span'),

            image = $('img#myImg');

        xRes.html(image.offset().top);
        yRes.html(image.offset().left);
    });
});
于 2012-11-27T15:14:57.060 に答える
2

offsetLeftとoffsetTopは、ドキュメントの左上隅を基準にした位置を返します。

function getCoordinates(elem) {
    var LeftPos = elem.offsetLeft;
    var TopPos = elem.offsetTop;
    return {X:LeftPos,Y:TopPos};
}
于 2017-06-01T09:29:20.040 に答える