Question

我正在尝试在单击按钮时创建可缩放图像，但是图像应该在可视区域上居中放大，因为图像可能比容器大。

我在这里创建了一个小提琴来说明我想要的东西，我显然通常会将图像隐藏在容器外面，我现在不会对这个部分感到困扰，也会放入边框覆盖以显示边界容器。

我已根据图像比例完成了缩放部分，我只需要计算出新的顶部和左侧css值，并在缩放后将其应用于图像。此外，图像也可以拖动，因此一旦移动图像，就必须考虑图像的位置。

基本上，红色容器内图像的中心点在缩放后必须保持不变，因此您可以有效地放大容器中间的任何内容。

why do you we need code to link to jsfiddle?

由于

编辑：

http://jsfiddle.net/FU55w/

与上述小提琴接近，但仍未完全缩放中心点

Answer 1

所以我找到了解决方案，

稍微复杂一点就是找出图像尺寸增加了多少。

我计算出x＆amp; y容器内图像中心点的y值，取左边和上边的值，将其转为正值，然后加上容器宽度和高度的一半。

var x = Math.abs(image.position().left) + container.width() / 2
var y = Math.abs(image.position().top) + container.height() / 2

我通过将新宽度除以旧宽度来计算出图像比例的比例，然后我可以将x＆amp; y按比例计算的值。

然后将新x和y之间的差异从当前左侧和顶部移开。

image.position().left - (newX - x)
image.position().top - (newY - y)

完整小提琴： http://jsfiddle.net/phHqQ/

Answer 2

根据您的评论尝试新的小提琴：

http://jsfiddle.net/wFaFg/6/

$("#zoom").on("click", function(e)
{
    var container = $("#container");
    var image = $("#container img");
    var curLeft = image.position().left;
    var curTop = image.position().top;
    var ratio = image.height() / image.width();

    image.css({
        height: image.height() + (20 * ratio),
        width: image.width() + (20 * ratio),
        left: curLeft - ((20 * ratio)/2),
        top: curTop - ((20 * ratio)/2)
    });
});

Answer 3

http://www.hklabs.org/articles/image_zooming_with_javascript

这是我在同一主题上做的优秀教程！使用单独的背景分割作为图像的一部分。图像的其他部分可以用background-repeat隐藏：no-repeat;现在使用background-position属性在分区内移动你的图像！

JavaScript缩放图像和中心可视区域

3 个答案: