Question

我正在开发一个小型缩放插件，到目前为止放大工作效果很好：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script
    src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
    crossorigin="anonymous"></script>

    <style>
      .zoom {
        position: relative;
        width: 400px;
        margin: 0 auto;
        height: 500px;
        overflow: hidden;
      }

      img {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
      }

      .container {
        padding-top: 200px;
        width: 50%;
        margin: 0 auto;
        text-align: center;
      }
    </style>


    <script>
      var _scale = 1;
      var defaultWidth;
      var defaultHeight;

      var widget = {

        init: function() {

          setTimeout(function() {
            defaultWidth = $('img').prop('width');
            defaultHeight = $('img').prop('height');
          }, 100);

          $('.zoom').on('click', function(e) {

            var scaleDelta = 0.5;
            var currentScale = _scale;
            var nextScale = currentScale + scaleDelta;
            var mousePosOnImageX = (e.pageX - $('.zoom').offset().left);
            var mousePosOnImageY = (e.pageY - $('.zoom').offset().top);

            var offsetX = -(mousePosOnImageX * scaleDelta);
            var offsetY = -(mousePosOnImageY * scaleDelta);

            offsetX = offsetX + parseFloat($('img').css('left').split('px').join(''));
            offsetY = offsetY + parseFloat($('img').css('top').split('px').join(''));

            $('img').css({
              width: defaultWidth * nextScale,
              height: defaultHeight * nextScale,
              left: offsetX,
              top: offsetY
            });

            _scale = nextScale;

          });
        }

      };

      $(document).ready(function() {
        widget.init();
      });
    </script>


</head>
<body>
  <div class="container">
    <div class="zoom">
      <img src="https://s7d1.scene7.com/is/image/BHLDN/44945368_007_a?$zoom-xl$" />
    </div>
  </div>
</body>
</html>

演示：http://jsfiddle.net/SySZL/220/

注意：代码是废话，我只是在玩......

如您所见，您可以放大一点。已经过了5个小时我不得不做同样的缩小操作，我相信这只是我为放大而写的公式的“逆”，有什么想法吗？

放大/缩小点击点周围的图像

0 个答案: