使用jQuery实现图片商标注楼栋

在网页开发中，经常会遇到需要在图片上标注楼栋或其他物体的需求。今天我们将介绍如何使用jQuery来实现这一功能。

步骤一：准备工作

首先，我们需要准备一张包含楼栋的图片，并在html中引入jQuery库。

<script src="

步骤二：创建图片标注功能

接下来，我们需要编写代码来实现图片标注功能。我们可以使用绝对定位来在图片上添加标注。

<img src="building.jpg" id="buildingImg" style="position: relative;">

$(document).ready(function() {
  $('#buildingImg').on('click', function(e) {
    var posX = e.pageX - $(this).offset().left;
    var posY = e.pageY - $(this).offset().top;
    
    var annotation = $('<div>').addClass('annotation').css({
      position: 'absolute',
      left: posX,
      top: posY
    });
    
    $(this).parent().append(annotation);
  });
});

步骤三：样式设计

最后，我们可以为标注添加样式，比如背景色和边框。

.annotation {
  width: 50px;
  height: 50px;
  background-color: #f00;
  border: 2px solid #000;
  border-radius: 50%;
}

完整示例

<!DOCTYPE html>
<html>
<head>
  <title>图片标注楼栋</title>
  <script src="
  <style>
    .annotation {
      width: 50px;
      height: 50px;
      background-color: #f00;
      border: 2px solid #000;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <img src="building.jpg" id="buildingImg" style="position: relative;">
  
  <script>
    $(document).ready(function() {
      $('#buildingImg').on('click', function(e) {
        var posX = e.pageX - $(this).offset().left;
        var posY = e.pageY - $(this).offset().top;
        
        var annotation = $('<div>').addClass('annotation').css({
          position: 'absolute',
          left: posX,
          top: posY
        });
        
        $(this).parent().append(annotation);
      });
    });
  </script>
</body>
</html>

通过以上步骤，我们可以实现在图片上标注楼栋的功能。用户点击图片时，会在点击位置添加一个圆形标注，可以根据实际需求自定义样式和功能。

希望以上内容对您有所帮助，谢谢阅读！