放大可见图像的中心？

Question

所以，这是一道数学题。我正在开发一个电子漫画阅读器，我想对其进行编程，以便您可以放大，但它不会从左上角放大，而是从中心放大。

@100%        @200% Currently   @200% Ideally      
----         --------          --------
|  |         |  |   |          | ---- |
----         ----   |          | |  | |
visible      |      |          | ---- |
size         --------          --------

缩放功能与input slider 绑定，范围从100 到300，然后转换为可见div 的百分比

function pageZoom() { // invoked onchange
 var outer = document.getElementById('viewer');
 var inner = document.getElementById('innerWindow');
 var zoomSlide = document.getElementById('zoomSlider');

 inner.style.width = zoomSlide.value + "%";
 var scrollShift = (zoomSlide.value - 1)/2; // This is the function that needs to change

 outer.scrollTop = scrollShift; // to update the scrollbars to the correct position
 outer.scrollLeft = scrollShift;
};

以此为html...

<div class="mainWindow dragscroll" id="viewer"> <!-- this element has the scroll bars -->
    <div id="innerWindow"> <!-- this element grows by input -->
        <img id="viewImgOne" /> <!-- set at 50% width -->
        <img id="viewImgTwo" /> <!-- set at 50% width -->
    </div>
</div>

自从我上过任何数学课以来，我已经很久没有上了，所以我的代数生疏。

 var body = document.body; // clientHeight & clientWidth are the user visible dimensions
 var outer = document.getElementById('viewer');
 var inner = document.getElementById('innerWindow');
 var zoomSlide = document.getElementById('zoomSlider'); // 100 to 300

有什么建议吗？

---

edit：在概念上类似于 CSS，但需要不同的处理缩放方法，以及除了悬停之外更持久的执行。输入要求不同的窗口尺寸、不同的缩放位置以及实现 JS 来解决问题。

Answer 1

function pageZoom() {
 var outer = document.getElementById('viewer');
 var inner = document.getElementById('innerWindow');
 var zoomSlide = document.getElementById('zoomSlider');
 var imgOne = document.getElementById('viewImgOne');
 var imgTwo = document.getElementById('viewImgTwo');
 console.log(inner.clientHeight)

 // Center Points
 var cPX = outer.scrollTop + outer.clientHeight/2;
 var cPY = outer.scrollLeft + outer.clientWidth/2;

 // Position Ratios to whole
 var cPXR = cPX/inner.clientHeight;
 var cPYR = cPY/inner.clientWidth;

 inner.style.width = zoomSlide.value + "%";
 if(imgOne.clientHeight >= imgTwo.clientHeight) {
   inner.style.height = imgOne.clientHeight + "px";
 } else {
   inner.style.height = imgTwo.clientHeight + "px";
 };
 outer.scrollTop = inner.clientHeight*cPXR - outer.clientHeight/2;
 outer.scrollLeft = inner.clientWidth*cPYR - outer.clientWidth/2;
};

获取您的百分比，保存，放大，然后将您的百分比重新应用到谁，减去一半的 outer.clientWidth 以再次与 scrollTop 和 ScrollLeft 位置同步。它有点波涛汹涌，但很有效。