单击图像时将坐标附加到div上

debugcn 发表于 Dev

f1614304

每当我将鼠标悬停在图像坐标上时，我想将这些坐标附加到div中

这是我到目前为止所拥有的小提琴

Jquery.js

  $('.hover').mousemove(function(e){

        var hovertext = $('.hover').attr('hovertext');
        $('#hoverdiv').text('(' + e.clientX + ',' + e.clientY + ')').show();
        $('#hoverdiv').css('top',e.clientY).css('left',e.clientX);

    }).$('#img').on('click', function () {
    $('(' + e.clientX + ',' + e.clientY + ')').appendTo('#append');
  }) .mouseout(function(){
        $('#hoverdiv').hide();
    });

index.html

<div id="hoverdiv"></div>
<img id="img" class="hover" src="Coordinates.svg.png"  hovertext="" />

<div id="append">
</div>

尼雅斯克

我刚刚对您的代码进行了一点更新，希望它能够满足您的要求。

$('.hover').mousemove(function(e) {

  var hovertext = $('.hover').attr('hovertext');
  $('#hoverdiv').text('(' + e.clientX + ',' + e.clientY + ')').show();
  $('#hoverdiv').css('top', e.clientY).css('left', e.clientX);

}).mouseout(function() {
  $('#hoverdiv').hide();
});

$('#img').click(function(e) {
  $('#append').append('(' + e.clientX + ',' + e.clientY + ')');
});

#hoverdiv {
  display: none;
  position: absolute;
  font-size: 14px;
  background-color: #fff;
  color: #404040;
  padding: 7px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<img id="img" class="hover" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/2D_Cartesian_Coordinates.svg/376px-2D_Cartesian_Coordinates.svg.png" hovertext="" />

<div id="append">
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。