Question

我正在尝试重新创建Facebook标记功能，您点击图像并单击图像的一部分会显示一个空框（或正方形）。

使用jQuery，如何在点击光标周围显示框？

由于

Answer 1

这样的东西可以帮助你，其中“image”是可标记的图像类，“box”是绝对位置元素的ID：

$(".image").click(function(e){
    $("#box").css('top',e.pageY).css('left',e.pageY);   
});

Answer 2

$(function(){
  $(document).click(function(e){
    $("<div>").
      text("Foo").
      css({ position: "absolute", top: e.pageY, left: e.pageX }).
      appendTo(document.body);
  });
});

您可以在events的文档中找到有关jQuery事件对象的更多信息。在此示例中，我使用的是event.Page X和event.PageY。

Answer 3

丑陋的代码警告：

<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>框？</div>

3 个答案: