可視画像の中心を拡大しますか？

Question

これは数学的な重い質問のビットです。私は電子漫画の電子書籍リーダーで電子で作業していますが、ズームインできるようにプログラムしたいのですが、左上からズームインするのではなく、中心からズームインします。

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

ズーム機能は、100から300の範囲input sliderに接続され、その後...可視div HTMLなどこれにより

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; 
}; 

ためパーセンテージに変換

<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> 

私は数学のクラスを取って以来、永遠にされているので、私の代数はrustyです。

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; 
}; 

、あなたの割合を取得して保存、ズームイン、その後、再適用あなたのパーセンテージscrollTopとScrollLeft位置に再び同期するように半分outer.clientWidthを差し引く、へ。ちょっとばかりですが、うまくいきます。