放大后的Jquery中心图像溢出:自动容器

jquery center image after zooming in overflow:auto container

本文关键字：溢出 图像 Jquery 心图 放大      更新时间：2023-09-26

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

实时演示:http://jsfiddle.net/RCw4T/1

基本思想是，当用户将图像的一部分居中并单击缩放时，图像会放大，但仍保持在该部分的居中。这样你就可以继续放大一个部分，而不必在每次点击后寻找该部分。

看起来脚本阻止给top和left值小于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插件

例子小提琴

之类的
if (iNewH > $container.height() || iNewW > $container.width()) {
    $container.scrollTo({ 
        top:(iNewH - $container.height()) / 2, 
        left:(iNewW - $container.width()) / 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/

这修复了小于大于混合，你应该一直居中:-)

相关文章：