放大後溢出的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/

修復該小於大於混合了，你應該去正確中心所有的時間:-)