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

Question

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

现场演示：http://jsfiddle.net/RCw4T/1

其基本思想是，当用户为中心的容器内的图像的部分，点击缩放，将图像放大，但仍然集中在该部分。这样，您可以继续放大某个部分，而无需在每次点击后查找该部分。

Answer 1

看起来脚本阻止给top和left值小于0，如果将逻辑更改为允许val UE的< 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/

修复该小于大于混合了，你应该去正确中心所有的时间:-)