首页 > 编程语言> > javascript – 页面上的“缩放”元素,同时保持窗口中心的放大中心

javascript – 页面上的“缩放”元素,同时保持窗口中心的放大中心

2019-05-26 23:24:02 作者：互联网

我正试图弄清楚如何放大页面上的所有元素,但保持放大的中心在窗口的中心.

在此页面上,一旦图像到达窗口的顶部或左侧,放大的中心就会改变.移动图像时也会发生变化. (正是你所期望的)

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

有任何想法吗？

解决方法:

好吧,这是我的看法.

唯一的问题是我放弃了你正在使用的容器.那是作弊吗？似乎他们只是为了让图像居中.没必要.

这按预期工作,没有副作用.

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

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

    });

标签：jquery,javascript,css,centering,zoom
来源： https://codeday.me/bug/20190526/1158812.html