Javascript &引用；“缩放”；元素，同时将放大中心保持在窗口的中心

我正试图找出如何放大页面上的所有元素，但要将放大的中心放在窗口的中心

在此页面上，一旦图像到达窗口的顶部或左侧，放大中心将发生变化。移动图像时，它也会发生变化。（正是你所期望的）

我想我需要采取完全不同的方法来实现我想要的。但我不确定这种方法是什么

---

有什么想法吗？

这是我想到的，它按照你说的那样工作，只是图像在放大或缩小后总是会转到中心：

$('document').ready(function() {
    zoomimg=$('#zoomimg'); // we store this in a variable since we don't need to traverse the DOM every time -- this is faster

    var viewportWidth = $(window).width();
    var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height(); // this is to work with Opera
    zoomimg.css({'position': 'absolute', 'left': (viewportWidth/2)-(zoomimg.width()/2), 'top' : (viewportHeight/2)-(zoomimg.height()/2)}).draggable();


    $(document).keydown(function(event) {
        event = event || window.event;

        var viewportWidth = $(window).width();
        var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height(); // this is to work with Opera

        if (event.keyCode == 38) {

            width = zoomimg.width();
            height = zoomimg.height();

            zoomimg.width(width*1.2).height(height*1.2);

            var viewportWidth = $(window).width();
            var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();
            zoomimg.css({'left': (viewportWidth/2)-(zoomimg.width()/2), 'top' : (viewportHeight/2)-(zoomimg.height()/2)});


        } else if (event.keyCode == 40) {

            width = zoomimg.width();
            height = zoomimg.height();

            zoomimg.width(width*0.8).height(height*0.8);

            var viewportWidth = $(window).width();
            var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();
            zoomimg.css({'left': (viewportWidth/2)-(zoomimg.width()/2), 'top' : (viewportHeight/2)-(zoomimg.height()/2)});

        } else {

            return

        }
    });

});

你应该在标签上加上一个ID“zoomimg”让它工作，溢出：隐藏在#容器上。同时也抛弃了display:table和display:table单元格，因为我们现在使用Javascript，所以它们毫无用处。此外，按下向下箭头键将导致容器向下滚动，因此您应该使用其他键，因为浏览器保留了箭头以滚动视口。

好吧，我的观点如下

唯一的问题是我扔掉了你用的容器。那是作弊吗？看起来他们只是为了让图像居中。没必要

这与预期一样有效，没有副作用

这是一个可以测试的工作演示：

（您需要先单击带有狒狒的窗格。）

HTML

jQuery

编辑：感谢@stagas提醒您清理冗余

 var $img = $('img');  // Cache the image. Better for performance.

  $img.draggable();


  $img.css({left: ($('body').width() / 2) - ($img.width() / 2)})
      .css({top: ($('body').height() / 2) - ($img.height() / 2)})


  $(document).keydown(function(event) {

      if (event.keyCode == 38) {
          var adjustment = 1.25;
      } else if (event.keyCode == 40)  {
          var adjustment = 0.8;
      } else {
          return;
      }

      var offset = $img.offset();  

      var width = $img.width();
      var height = $img.height();

      var newWidth = width * adjustment;
      var newHeight = height * adjustment;

      var diffWidth = newWidth - width;
      var diffHeight = newHeight - height;

      var hcenter = $('body').width() / 2;
      var vcenter = $('body').height() / 2;

      var leftPercent = (hcenter - offset.left) / width;
      var topPercent = (vcenter - offset.top) / height;

      $img.offset({top: offset.top - (diffHeight * topPercent), left: offset.left - (diffWidth * leftPercent)});

      $img.width(newWidth).height(newHeight);

    });​

---

这太棒了！我现在正在通读代码，试图让我的头脑了解一切。啊，我明白了，这真的很有趣。这是因为您要添加

1/4

，因此需要减去

1/5

。是的，百分比是根据新维度而不是原始维度计算的。所以你需要计算出合适的百分比，才能回到原来的水平。幸运的是，随着

20%

的减少，返回的是一个干净的

25%

增加。@Acorn-啊，我明白了。我假设它是基于图像偏离中心的百分比，即位置应该向左/向右或上/下移动多少。不过只是猜测而已。这就是你要去的方向吗？@Acorn-好吧，我用部分解决方案更新了我的答案（和JSFIDLE）。在图像离开页面之前，它似乎一直工作。然后它会变小一点。不管怎样，希望它能有所帮助。@Acorn-部分问题在于这行

xr=（cx-width）/width（以及高度版本）。由于所有值都是常量，因此每次的值都相同
（cx宽度）
实际上是图像右侧位于中心线上时图像左侧的剩余空间。将剩余部分除以图像的宽度，就可以告诉我们，如果我们有效地将图像移动到其宽度上，有多少图像（或空白）是可见的。我认为我所做的是正确的，但是当它离开页面时，计算变得扭曲了。@Acorn-我想我已经得到了。我只是在正文中添加了一点CSS&html。现在好像有用了。这些数字以前是倾斜的，因为当图像超出页面边界时，文档正在调整大小。“现在不应该了。”斯塔加斯——实际上，我确实认为可能有一个小问题。如果你放大和缩小很多，中心点确实开始移动一点。（可能是因为定位是基于百分比的，有时需要舍入。解决方案可能是在用户拖动图像时随时更新存储的参考点。然后可以在缩放时使用该点“重新校准”中心。今天我可能会做一次更新。
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}​

 var $img = $('img');  // Cache the image. Better for performance.

  $img.draggable();


  $img.css({left: ($('body').width() / 2) - ($img.width() / 2)})
      .css({top: ($('body').height() / 2) - ($img.height() / 2)})


  $(document).keydown(function(event) {

      if (event.keyCode == 38) {
          var adjustment = 1.25;
      } else if (event.keyCode == 40)  {
          var adjustment = 0.8;
      } else {
          return;
      }

      var offset = $img.offset();  

      var width = $img.width();
      var height = $img.height();

      var newWidth = width * adjustment;
      var newHeight = height * adjustment;

      var diffWidth = newWidth - width;
      var diffHeight = newHeight - height;

      var hcenter = $('body').width() / 2;
      var vcenter = $('body').height() / 2;

      var leftPercent = (hcenter - offset.left) / width;
      var topPercent = (vcenter - offset.top) / height;

      $img.offset({top: offset.top - (diffHeight * topPercent), left: offset.left - (diffWidth * leftPercent)});

      $img.width(newWidth).height(newHeight);

    });​