Question

我在另一篇文章中提出了这个问题 - How do I put a <div> box around my cursor on 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>

我遇到的问题是，当我实现此代码段时，每次点击都会出现一个框并保留在那里。因此，如果我点击图像10次，我会得到10个盒子。一旦我点击其他地方（即让盒子移动到图像上的另一个地方（就像Facebook图片标记一样），我怎么能让前一个盒子消失？）

感谢。

Answer 1

试试这个：

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

如何复制Facebook图片标记功能？

1 个答案: