保持放大中心在窗口中心的情况下，在页面上"缩放"元素

Question

保持放大中心在窗口中心的情况下，在页面上"缩放"元素

javascriptjquerycsszoomingcentering

4

我正在尝试强化页面上所有元素的大小，但保持放大中心位于窗口中心。

在此页面上，一旦图像到达窗口顶部或左侧，放大中心就会改变。当您移动图像时，它也会发生变化。(正如您所期望的那样)

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

有什么想法吗？

- Acorn

啊，我明白了，这真的很有趣。因为你加了 1/4，所以需要减去 1/5。 - Acorn

1

是的，百分比是根据新尺寸计算的，而不是原始尺寸。因此，您需要找出正确的百分比以返回到原始尺寸。幸运的是，通过减少 20%，可以干净地增加 25% 以返回。 - user113716

2个回答

3

这是我想到的，它按照你说的方式工作，但是在缩放后图像总是会居中显示：

$('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”，并在#container上添加overflow:hidden。此外，放弃使用display:table和display:table-cell，因为现在我们使用Javascript进行居中。另外，按下箭头键会导致容器向下滚动，因此您应该使用其他键，因为浏览器将箭头保留用于滚动视口。

- stagas

太棒了！我现在正在阅读代码，试图理解其中的所有内容。 - Acorn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user113716 · Accepted Answer

我认为应该这样做。

唯一的问题是我放弃了你使用的容器。这算作作弊吗？似乎它们只是用来让图片居中。没有必要。

这个代码可以正常工作，没有副作用。

这里有一个可测试的演示：

http://jsfiddle.net/YFPRB/1/

(您需要先点击狒狒的窗格。)

HTML

<body>

<img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" />

</body>

CSS

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

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);

    });