如何放置< div>光标周围的方框上单击? [英] How do I put a <div> box around my cursor on click?

问题描述

我正在尝试重新创建Facebook标记功能，即单击图像，然后单击图像的一部分会显示一个空框(或正方形).

I am trying re-create the facebook tagging functionality, where you click on an image and the part of the image you click on displays an empty box (or a square).

使用jQuery，如何使单击框显示在光标周围?

Using jQuery, how do I make the box appear around my cursor on the click?

谢谢

推荐答案

丑陋的代码警告:

<script type="text/javascript">
  $(document).ready(function() {
    $("#image-wrapper").click(function(e){
      var ele = $("<div>");
      ele.css({width:"50px", height:"50px", border:"1px solid green", position:"absolute", left: e.pageX - 25, top: e.pageY -25});
      $("body").append(ele);      
   }); 
  });
</script>

<div id="image-wrapper" style="border: 1px solid red; width: 300px; height: 200px;">
</div>

这篇关于如何放置< div>光标周围的方框上单击?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！