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

有什么建议吗？

编辑：类似于概念中的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位置同步。它有点不稳定，但它确实有效。

放大可见图像的中心？

1 个答案: