我正在尝试找出如何放大页面上的所有元素，但将放大的中心保持在窗口的中心。
在此页面上，一旦图像到达窗口的顶部或左侧，放大的中心就会发生变化。当您移动图像时，它也会发生变化。 (正是你所期望的)
我想我需要采取一种完全不同的方法来实现我想要的。但我不确定这种方法是什么..
有什么想法吗？
最佳答案
好吧，这是我的看法。
唯一的问题是我放弃了您使用的容器。那是作弊吗？似乎他们只是为了让图像居中。不需要。
这按预期工作，没有副作用。
这是一个您可以测试的工作演示:
(您需要先点击有狒狒的 Pane 。)
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);
});
关于javascript - "Zooming"页面上的元素，同时保持放大的中心在窗口的中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2940240/