javascript - 滚动图像时如何移动图像上添加的图钉

Question

我在我的 HTML 页面上添加了一张图片，由于图片很大，我将它显示在一个 div 上，我可以在滚动 map 时滚动该图片。我使用 jQuery 在其上添加了 3 个标记。

问题是当我滚动图像时，标记没有滚动。我怎样才能做到这一点？

这是我的 JS Fiddle demo和代码:

var Markers = {
  fn: {
    addMarkers: function() {
      var target = $('#image-wrapper');
      var data = target.attr('data-captions');
      var captions = $.parseJSON(data);
      var coords = captions.coords;

      for (var i = 0; i < coords.length; i++) {
        var obj = coords[i];
        var top = obj.top;
        var left = obj.left;
        var text = obj.text;

        $('<span class="marker"/>').css({
          top: top,
          left: left
        }).html('<span class="caption">' + text + '</span>').
        appendTo(target);
      }
    },
    showCaptions: function() {
      $('span.marker').live('click', function() {
        var $marker = $(this),
          $caption = $('span.caption', $marker);
        if ($caption.is(':hidden')) {
          $caption.slideDown(300);
        } else {
          $caption.slideUp(300);
        }
      });
    }
  },

  init: function() {
    this.fn.addMarkers();
    this.fn.showCaptions();
  }
};

$(function() {
  Markers.init();
});

#mydiv {
  overflow: auto;
  max-width: 800px;
  max-height: 600px;
}

#image-wrapper {
  width: 400px;
  height: 400px;
  position: relative;
  margin: 2em auto;
  background: #f6f6f6;
  border: 2px solid #ddd;
}

#image-wrapper img {
  display: block;
  margin: 25px auto;
}

span.marker {
  width: 20px;
  height: 20px;
  background: #f66;
  color: #fff;
  text-align: center;
  position: absolute;
  line-height: 20px;
  cursor: pointer;
}

span.marker:before {
  content: '+';
}

span.caption {
  width: 180px;
  background: #f66;
  color: #fff;
  padding: 4px;
  position: absolute;
  top: 20px;
  left: 0;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="image-wrapper" 
  data-captions='{"coords": [
    {"top":180,"left":160,"text":"iMac 1"},
    {"top":250,"left":300,"text":"iMac 2"},
    {"top":250,"left":360,"text":"iMac 2"}
  ]}'>

  <div id='mydiv'>
    <img src="https://cdn.vectorstock.com/i/1000x1000/96/84/top-view-city-map-abstract-town-flat-design-vector-11299684.jpg" alt="" />
  </div>
</div>

我如何更新我的 JS Fiddle 以便实现它，当我滚动我的图像时，图钉相应地滚动并始终粘在其固定位置？

Answer 1

你的意思是这样的？如果这是您的本意，您基本上将 overflow: auto; 放在了错误的位置。

var Markers = {
    fn: {
        addMarkers: function() {
            var target = $('#image-wrapper');
            var data = target.attr('data-captions');
            var captions = $.parseJSON(data);
            var coords = captions.coords;

            for (var i = 0; i < coords.length; i++) {
                var obj = coords[i];
                var top = obj.top;
                var left = obj.left;
                var text = obj.text;

                $('<span class="marker"/>').css({
                    top: top,
                    left: left
                }).html('<span class="caption">' + text + '</span>').
                appendTo(target);

            }
        },
        showCaptions: function() {
            $('span.marker').live('click', function() {
                var $marker = $(this),
                    $caption = $('span.caption', $marker);
                if ($caption.is(':hidden')) {
                    $caption.slideDown(300);

                } else {
                    $caption.slideUp(300);

                }

            });

        }
    },

    init: function() {
        this.fn.addMarkers();
        this.fn.showCaptions();

    }
};

$(function() {
    Markers.init();

});

#mydiv {
    max-width: 800px;
    max-height: 600px;
}


#image-wrapper {
    overflow: auto;
    width: 400px;
    height: 400px;
    position: relative;
    margin: 2em auto;
    background: #f6f6f6;
    border: 2px solid #ddd;
}

#image-wrapper img {
    display: block;
    margin: 25px auto;
}

span.marker {
    width: 20px;
    height: 20px;
    background: #f66;
    color: #fff;
    text-align: center;
    position: absolute;
    line-height: 20px;
    cursor: pointer;
}
span.marker:before {
    content: '+';
}

span.caption {
    width: 180px;
    background: #f66;
    color: #fff;
    padding: 4px;
    position: absolute;
    top: 20px;
    left: 0;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="image-wrapper" 
<div id="image-wrapper" data-captions='{"coords": [{"top":180,"left":160,"text":"iMac 1"},{"top":250,"left":300,"text":"iMac 2"},
{"top":250,"left":360,"text":"iMac 2"}

]}'>

<div id='mydiv'>
    <img src="https://cdn.vectorstock.com/i/1000x1000/96/84/top-view-city-map-abstract-town-flat-design-vector-11299684.jpg" alt=""/>
    </div>
</div>