使用JavaScript在單幅大圖像的不同「作物」之間切換

Question

所以我一直在讀幾十個Javascript縮放組件，但他們都沒有做我在找什麼，所以我很好奇在哪裏找到這樣的組件（如果存在的話）或如何自己編寫它。

目標是將一個大的（1000x1000）圖像下載到瀏覽器。然後在瀏覽器中，圖像在同一個元素容器中將具有三種呈現狀態，用戶可以通過點擊某個頁面元素來切換。狀態1（默認）：查看整個圖像，但按比例縮小以適應500x500容器（即縮小但未裁剪）。例如（不按比例，而是與其他的狀態比較）：

狀態2：參見中間50％，居中，在相同的容器（即實際尺寸，並裁剪）。例如：

狀態3：見中間25％，居中，在相同的容器（即放大和裁剪相當多的）。例如：

而且我會提出，在某些頁面元素的點擊這三種狀態之間切換，如按鈕的腳本。

任何人都可以提供一個鏈接到一個組件這樣做，或建議如何實現它的方法？

感謝您的幫助！

Answer 1

我會在這裏利用一些CSS。

對於第一種情況：

1）創建DIV是500×500，和背景圖像設置到該文件。確保你在div上設置background-size:contain屬性。

2）對於第二種情況下，我將刪除background-size:contain

3）第三情況下，我將設置`背景尺寸：200％;」

JSFiddle

Answer 2

如果你所描述什麼是真正你想這樣做，可以用一些CSS和JavaScript的幾行可以輕鬆實現：

var container = document.querySelector('.image-zoom'), 
 
    zoomBtn = document.getElementById('zoom-it'), 
 
    i = 0; 
 

 
function clickHandler() { 
 
    if (i === 0) { 
 
     container.classList.add('zoom-2x'); 
 
     i++; 
 
    } else if (i === 1) { 
 
     container.classList.add('zoom-4x'); 
 
     i++; 
 
    } else { 
 
     container.classList.remove('zoom-2x'); 
 
     container.classList.remove('zoom-4x'); 
 
     i = 0; 
 
    } 
 

 
} 
 

 
zoomBtn.addEventListener('click', clickHandler);

.image-container, .image-zoom { 
 
    width: 250px; 
 
    height: 250px; 
 
} 
 

 
.image-container { 
 
    overflow: hidden; 
 
} 
 

 
.image-zoom.zoom-2x { 
 
    transform: scale(2); 
 
} 
 

 
.image-zoom.zoom-4x { 
 
    transform: scale(4); 
 
}

<div class="image-container"> 
 
    <div class="image-zoom" style="background-image:url(http://lorempixel.com/250/250)"> 
 
    </div> 
 
</div> 
 

 
<button id="zoom-it">zoom image</button>

這假定你知道圖像的尺寸，如果你使用的是CMS，你可能很容易得到它並將它們插入在.image-zoom和.image-container elem上經濟需求。

jsFiddle

編輯

jsFiddle 2

修改了的jsfiddle更接近到什麼問你的問題（圖像的初始狀態包含在廣場內，並沒有冒出任何量。）