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

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

javascript jquery

Javascript 放大/缩小单击点周围的图像,javascript,jquery,Javascript,Jquery,我正在开发一个小的缩放插件，到目前为止，放大效果非常好： <!DOCTYPE html> <html> <head> <title></title> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" cros

我正在开发一个小的缩放插件，到目前为止，放大效果非常好：

<!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>


.zoom{
位置：相对位置；
宽度：400px；
保证金：0自动；
高度：500px；
溢出：隐藏；
}
img{
位置：绝对位置；
宽度：100%；
排名：0；
左：0；
}
.集装箱{
填充顶部：200px；
宽度：50%；
保证金：0自动；
文本对齐：居中；
}
var_标度=1；
可变宽度；
高度；
变量小部件={
init:function（）{
setTimeout（函数（）{
defaultWidth=$（'img'）.prop（'width'）；
defaultHeight=$（'img'）.prop（'height'）；
}, 100);
$（'.zoom'）。打开（'click'，函数（e）{
var scaleDelta=0.5；
var currentScale=_scale；
var nextScale=当前刻度+刻度刻度；
var mousePosOnImageX=（e.pageX-$（'.zoom'）.offset（）.left）；
var mousePosOnImageY=（e.pageY-$（'.zoom'）.offset（）.top）；
var offsetX=-（鼠标声图像*缩放LTA）；
var offsetY=-（mousePosOnImageY*scaleDelta）；
offsetX=offsetX+parseFloat（$（'img'）.css（'left'））.split（'px'）.join（''）；
offsetY=offsetY+parseFloat（$（'img'）.css（'top'）.split（'px'）.join（''）；
$（'img'）.css({
宽度：defaultWidth*nextScale，
高度：默认高度*nextScale，
左：offsetX，
顶部：越位
});
_规模=下一个规模；
});
}
};
$（文档）.ready（函数（）{
widget.init（）；
});

演示：

注意：代码是垃圾，我只是在玩

如您所见，可以围绕点放大。已经5个小时了，我一直在做同样的缩小，我相信这只是我写的放大公式的“逆”，有什么想法吗

仔细想想，放大和缩小其实是一回事。放大将添加到标量，缩小将从标量中减去。默认情况下，它是x1。放大可能会使值增加0.1，从而得到x1.1。缩小只需从中减去0.1，变成x1。这一部分很简单，我要说的是从一个点缩小的左/顶值。你不只是将0.5改为-0.5吗？是的，但是左/顶位置呢？@JeremieGes你错过了我的观点。我想说的是，应该只有一个“公式”——一个放大和缩小的函数。你需要的只是

f（fx，fy，ix，iy，scale）

（在[0,1]中的帧xy和图像xy）来计算适当的变换。如果你仔细想想，放大和缩小实际上是一样的。放大将添加到标量，缩小将从标量中减去。默认情况下，它是x1。放大可能会使值增加0.1，从而得到x1.1。缩小只需从中减去0.1，变成x1。这一部分很简单，我要说的是从一个点缩小的左/顶值。你不只是将0.5改为-0.5吗？是的，但是左/顶位置呢？@JeremieGes你错过了我的观点。我想说的是，应该只有一个“公式”——一个放大和缩小的函数。您只需

f（fx、fy、ix、iy、scale）

（在[0,1]中的帧xy和图像xy）即可计算适当的变换。