页面上的“缩放”元素，同时将放大中心保持在窗口的中心
Posted
技术标签:
【中文标题】页面上的“缩放”元素，同时将放大中心保持在窗口的中心【英文标题】："Zooming" elements on a page while keeping the centre of enlargement in the centre of the window 【发布时间】：2011-02-25 18:47:12 【问题描述】：我正在研究如何放大页面上的所有元素，但将放大的中心保持在窗口的中心。
在此页面上，一旦图像到达窗口的顶部或左侧，放大中心就会改变。当您移动图像时，它也会发生变化。 （正是你所期望的）
我想我需要采取完全不同的方法来实现我想要的。但我不确定这种方法是什么..
有什么想法吗？
【问题讨论】：
啊，我明白了，这真的很有趣。因为你加了1/4，所以你需要减去1/5。
是的，百分比是根据新尺寸而不是原始尺寸计算的。因此，您需要找出正确的百分比以恢复原始状态。幸运的是，20% 减少，25% 增加返回。
【参考方案1】：
好吧，这是我的看法。
唯一的问题是我放弃了你正在使用的容器。这是作弊吗？似乎他们只是为了让图像居中。不需要。
这按预期工作，没有副作用。
这是一个您可以测试的工作演示：
http://jsfiddle.net/YFPRB/1/
（您需要先单击带有狒狒的窗格。）
<body>
<img src="http://cdn.sstatic.net/***/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);
);
【讨论】：
@Acorn - 啊，我明白了。我会假设它是基于图像偏离中心的百分比，即位置应该向左/右或上/下移动多少。不过只是猜测。这是你要去的方向吗？ @Acorn - 好吧，我用部分解决方案更新了我的答案（和 jsFiddle）。它似乎可以工作，直到图像离开页面。然后它会掉一点。无论如何，希望它有所帮助。 @Acorn - 部分麻烦在于这条线xr = (cx-width)/width;（以及高度版本）。每次的值都相同，因为所有值都是恒定的。当图像右侧位于中心线上时，(cx-width) 实际上是图像左侧的剩余空间。并且将剩余部分除以图像的宽度只是告诉我们如果我们有效地将图像移动到其宽度的数量，那么有多少图像（或空白）将是可见的。我认为我所拥有的一切都在正确的轨道上，但是当它离开页面时计算变得有偏差。
@Acorn - 我想我明白了。 jsfiddle.net/dEhgV/10 我刚刚在 body 和 html 中添加了一点 CSS。似乎现在可以工作了。之前的数字是倾斜的，因为当图像超出页面边界时文档正在调整大小。现在不应该。
@stagas - 实际上我认为可能存在一个小问题。如果你放大和缩小很多，中心点确实开始移动一点。 （可能是因为定位是基于百分比的，有时需要四舍五入。解决方案可能是在用户拖动图像时随时更新存储的参考点。然后可以在缩放时使用它来“重新校准”中心。我可能会今天的某个时间做一个更新。【参考方案2】：
这是我想出来的，它就像你说的那样工作，只是图像在放大或缩小后总是会到中心：
$('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 上添加溢出：隐藏。还要抛弃 display:table 和 display:table-cell ，因为我们以 javascript 为中心，所以它们没用了。此外，按下向下箭头键将导致容器向下滚动，因此您应该使用其他键，因为箭头是浏览器保留用于滚动视口的。
【讨论】：
这太棒了！我现在正在浏览代码，试图了解所有内容。以上是关于页面上的“缩放”元素，同时将放大中心保持在窗口的中心的主要内容，如果未能解决你的问题，请参考以下文章