這個問題是類似這樣的:Zoom in on a point (using scale and translate) 甚至這一個:Image zoom centered on mouse position ,但我不想做一個畫布,但一個正常的圖像(或而不是圖像的容器div)。 所以縮放應該是谷歌地圖。 我其實黑客/增強iDangerous組隊,探索變焦(http://idangero.us/swiper/),這是我的出發點,這是是我走到這一步: https://jsfiddle.net/xta2ccdt/3/放大一個鼠標滾輪點(使用規模和翻譯)
變焦只可使用鼠標滾輪。第一次放大時,它會完美放大,但我無法弄清楚如何在第一次放大後計算每個縮放。
這裏是我的代碼: JS:
$(document).ready(function(){
$("#slideContainer").on("mousewheel DOMMouseScroll", function (e) {
e.preventDefault();
var delta = e.delta || e.originalEvent.wheelDelta;
var zoomOut;
if (delta === undefined) {
//we are on firefox
delta = e.originalEvent.detail;
zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
zoomOut = !zoomOut;
} else {
zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
}
var touchX = e.type === 'touchend' ? e.changedTouches[0].pageX : e.pageX;
var touchY = e.type === 'touchend' ? e.changedTouches[0].pageY : e.pageY;
var scale = 1, translateX, translateY;
if(zoomOut){
//we are zooming out
//not interested in this yet
}else{
//we are zooming in
scale = scale + 0.5;
var dimensionMultiplier = scale - 0.5;//when image is scaled up offsetWidth/offsetHeight doesn't take this into account so we must multiply by scale to get the correct width/height
var slideWidth = $("#slide")[0].offsetWidth * dimensionMultiplier;
var slideHeight = $("#slide")[0].offsetHeight * dimensionMultiplier;
var offsetX = $("#slide").offset().left;//distance from the left of the viewport to the slide
var offsetY = $("#slide").offset().top;//distance from the top of the viewport to the slide
var diffX = offsetX + slideWidth/2 - touchX;//this is distance from the mouse to the center of the image
var diffY = offsetY + slideHeight/2 - touchY;//this is distance from the mouse to the center of the image
//how much to translate by x and y so that poin on image is alway under the mouse
//we must multiply by 0.5 because the difference between previous and current scale is always 0.5
translateX = ((diffX) * (0.5));
translateY = ((diffY) * (0.5));
}
$("#slide").css("transform", 'translate3d(' + translateX + 'px, ' + translateY + 'px,0) scale(' + scale + ')').css('transition-duration', '300ms');
});
});
HTML:
<div id="slideContainer">
<div id="slide">
<img src="http://content.worldcarfans.co/2008/6/medium/9080606.002.1M.jpg"></img>
</div>
</div>
CSS:
#slideContainer{
width:500px;
height:500px;
overflow:hidden;
}
#slide{
width:100%;
height:100%;
}
img{
width:auto;
height:auto;
max-width:100%;
}
我也想通了,如果我減去先前的平移X和translateY值當前的,我可以儘可能多地放大同一點,並且會縮小p但是如果我放大一個點然後改變鼠標位置並再次放大,它將不再按照它應該放大的那樣縮放。例如:https://jsfiddle.net/xta2ccdt/4/
如果我改變鼠標位置,並計算新舊鼠標位置之間的X和Y差異,並將其添加到差異計算中,它將第二次正確縮放。但第三次看起來差異仍然從總計算中減去,這將導致翻譯再次移動圖像,之後,如果我們將鼠標放在相同的位置,它將再次正確地縮放。 所以我想我會在每次計算新的「差異」時添加舊的和新的鼠標位置之間的差異,並且這種作品不再像當我停止添加鼠標位置差異時那樣跳躍,但它仍然沒有放大到相同的位置,每次新的縮放都會移動(偏移)圖像一小部分。我認爲這是因爲每次都有一個新的縮放值,但偏移量不是線性的,它每次都小於零,我無法弄清楚如何抵消偏移量。 這裏是新的例子:https://jsfiddle.net/xta2ccdt/5/ 在例如新形象:一個老不再可用:https://jsfiddle.net/xta2ccdt/14/
相依但
沒有按沒有結束標籤。它應該自我關閉
我也不得不使用像佔位符b/c之類的其他圖像被阻止。出於某種原因,我無法縮小。 –
我發現這個插件,似乎做你想做的:http://www.jqueryscript.net/demo/jQuery-Plugin-for-Image-Zoom-In-Out-With-Mousewheel-imgViewer/ – Isma
btw。我最終放棄了這一點,並使用panzoom代替:https://github.com/timmywil/jquery.panzoom –