Javascript 放大溢出后的jquery中心图像：自动容器

我需要帮助集中在一个溢出容器内的图像：自动放大后的图像宽度和高度

现场演示：

其基本思想是，当用户将图像的一部分集中在容器内并单击“缩放”时，图像会放大，但仍保持在该部分的中心位置。这样，您就可以继续放大某个部分，而无需在每次单击后查找该部分。

这里有一个小提琴：

它可能需要一些调整

下面是fiddle中的js代码：

var zoomFactor = 1;

$('#container img').click(function(e) {

    var iScaler = 1.5,
        iH = $(this).height(),
        iW = $(this).width(),
        iNewH = iH * iScaler,
        iNewW = iW * iScaler,
        $parent = $(this).parent(),
        zoomPosX = (e.clientX - ($parent.width() / 2)) / zoomFactor,
        zoomPosY = (e.clientY - ($parent.height() / 2)) / zoomFactor;
    zoomFactor *= iScaler;
    $(this).css({
        top: zoomPosY + 'px',
        left: zoomPosX + 'px',
        width: iNewW + 'px',
        height: iNewH + 'px'
    });

});

---

在您的版本中：

这修正了小于大于的混淆，你应该一直向右居中：-）

这是一把小提琴：

它可能需要一些调整

下面是fiddle中的js代码：

var zoomFactor = 1;

$('#container img').click(function(e) {

    var iScaler = 1.5,
        iH = $(this).height(),
        iW = $(this).width(),
        iNewH = iH * iScaler,
        iNewW = iW * iScaler,
        $parent = $(this).parent(),
        zoomPosX = (e.clientX - ($parent.width() / 2)) / zoomFactor,
        zoomPosY = (e.clientY - ($parent.height() / 2)) / zoomFactor;
    zoomFactor *= iScaler;
    $(this).css({
        top: zoomPosY + 'px',
        left: zoomPosX + 'px',
        width: iNewW + 'px',
        height: iNewH + 'px'
    });

});

---

在您的版本中：

---

这修复了小于大于的混淆，您应该一直向右居中：-）

看起来脚本阻止为小于0的值提供

top

和

left

值，如果更改逻辑以允许值<0，则应获得居中缩放

改变这个

iTop = (iNewH < ipH ? (ipH / 2) - (iNewH / 2) : 0);
iLeft = (iNewW < ipW ? (ipW / 2) - (iNewW / 2) : 0);

编辑：

要允许滚动到图像的所有部分（即没有负面定位），可以使用jquery插件

差不多

if (iNewH > $container.height() || iNewW > $container.width()) {
    $container.scrollTo({ 
        top:(iNewH - $container.height()) / 2, 
        left:(iNewW - $container.width()) / 2 
    });
}

---

可以考虑改变上面的逻辑来单独处理高度/宽度，我将把它留给你。

看这个脚本防止给予<代码>顶部< /C> >代码>左< /COD>值小于0，如果你改变逻辑允许值<0，你应该得到一个中心缩放……/P> 改变这个

iTop = (iNewH < ipH ? (ipH / 2) - (iNewH / 2) : 0);
iLeft = (iNewW < ipW ? (ipW / 2) - (iNewW / 2) : 0);

编辑：

要允许滚动到图像的所有部分（即没有负面定位），可以使用jquery插件

差不多

if (iNewH > $container.height() || iNewW > $container.width()) {
    $container.scrollTo({ 
        top:(iNewH - $container.height()) / 2, 
        left:(iNewW - $container.width()) / 2 
    });
}

---

可以考虑改变上面的逻辑来单独处理高度/宽度，我将把它留给你。< /P>但是我不想通过左上和负的方式来切断图像。滚动条应该移动到必要的位置，使其在帧中居中。好主意，但我实现了它，但它仍然没有滚动到所需的位置。它以什么方式不工作，滚动到图像的错误部分，还是根本没有滚动？您包含了ScrollTo插件？它滚动到了图像的错误部分，即使在您的小提琴示例中，它也没有滚动到正确的位置。是的，我包括了ScrollTo，但我不希望图像被从上到左的负片截去。滚动条应该移动到必要的位置，使其在帧中居中。好主意，但我实现了它，但它仍然没有滚动到所需的位置。它以什么方式不工作，滚动到图像的错误部分，还是根本没有滚动？您包含了ScrollTo插件？它滚动到了图像的错误部分，即使在您的小提琴示例中，它也没有滚动到正确的位置。是的，我包括了scrollTo