Question

在放大图像宽度和高度后，我需要帮助将图像集中在容器内溢出：auto。

根本的想法是，当用户将图像的一部分集中在容器内并单击缩放时，图像会放大但仍然保持在该部分的中心。这样你可以继续放大一个部分，而不必在每次点击后搜索该部分。

Answer 1

如果您将逻辑更改为允许值＆lt;

，则查看脚本会阻止将top和left值设置为小于0。 0你应该得到一个居中的缩放...

更改此

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

到此

iTop = (ipH / 2) - (iNewH / 2);
iLeft = (ipW / 2) - (iNewW / 2);

修改

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

example fiddle

类似

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

可能会考虑改变上面的逻辑来分别处理高度/宽度，我会把它留给你。

Answer 2

这是一个小提琴：http://jsfiddle.net/maniator/jhDhM/

可能需要一些调整。

这是小提琴中的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'
    });

});

在您的版本中：http://jsfiddle.net/maniator/RCw4T/10/

这可以解决小于大于混合的问题，你应该一直向右对中： - ）

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

2 个答案: