Question

我有一张图片并且有一个圆圈（使用css3绘制）。

现在，当我放大/缩小图像时，我希望将圆圈的位置保持在图像中的相同位置，这样当图像放大/缩小时，圆圈将会平移，但我无法如何计算我需要在图像放大/缩小时平移圆圈的坐标。任何建议!!

图像和圆圈是HTML中的兄弟元素

Answer 1

我花了一段时间，但我写了一些可以与<img>标签一起使用的东西，另一个元素与位置：绝对;。

＆＃13;

$(document).ready(function() {
  function setDimentions(first) {
    IW = $('.img_container img').width();
    IH = $('.img_container img').height();
    PW = $('.pointer').outerWidth();
    PH = $('.pointer').outerHeight();
    pointerL = Number($('.pointer').css('left').replace('px', ''));
    pointerT = Number($('.pointer').css('top').replace('px', ''));
    if (first) {
      Lperc = pointerL * 100 / IW;
      Tperc = pointerT * 100 / IH;
      Wperc = PW * 100 / IW;
      Hperc = PH * 100 / IH;
    }
    Lpx = Lperc * IW / 100;
    Tpx = Tperc * IH / 100;
    Wpx = Wperc * IW / 100;
    Hpx = Hperc * IH / 100;
  }
  setDimentions(true);
  $(window).on('resize', function() {
    setDimentions();
    $('.pointer').css({
      'width': Wpx,
      'height': Hpx,
      'top': Tpx,
      'left': Lpx
    })
  })
});

＆＃13;

* {
  margin: 0;
  box-sizing: border-box;
}
.img_container {
  width: 80%;
  margin: 0 10%;
  position: relative;
}
img {
  max-width: 100%;
}
.pointer {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: thin solid red;
  position: absolute;
  left: 35%;
  top: 16%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img_container">
  <img src="http://i.imgur.com/XXxgr7xg.jpg">
  <div class="pointer">
  </div>
</div>

＆＃13;

在放大/缩小图像时平移图像上的圆圈

1 个答案: