加載，滾動，放大和縮小圖像像谷歌地圖

Question

我正在一個Web應用程序。我只想知道如何去做。它就像一個地圖應用程序，但不是地圖。

我需要在mysql數據庫的div內的網頁上顯示100個圖像。每個圖像將顯示在特定的預定義圖塊上。我想要以下功能主義者。圖像的

1. 加載（不是所有的圖像）
2. 放大和縮小。像地圖一樣更新圖像。
3. 滾動。像地圖一樣更新圖像。

a。我的div只能顯示25張圖片。我只想在該區域加載25張圖片。剩餘的圖像應該在滾動或放大和縮小時加載。

b。如果用戶點擊「放大」，那麼它應該加載並顯示下一層大圖像，如谷歌地圖，如果我點擊縮小，然後顯示前一層小圖像。

任何人都可以給我這個想法如何構建這個應用程序。我已經檢查過OpenLayers，地理服務器和ajax-zoom。我不想去地理服務器，因爲它不是地圖應用程序。但我需要地圖的相同功能。我應該使用jquery插件來做到這一點。

請幫

問候， 阿西夫·哈米德

Answer 1

有點壞了，但這裏的一些建議：

---

2. 放大和縮小可以用CSS的可以輕鬆實現zoom屬性。困難的部分是放大特定的位置。

爲此，您可以將可調整大小的divider元素放入另一個元素中。包含元素將具有overflow的none，並保持相同的大小。這樣，您可以根據手指的位置（假設您期望觸摸設備使用此位置）和div內的位置獲取準確的座標。

如果您只是放大桌面，請將原始變量設置爲屏幕中心。

就改變圖像而言，只要設置的CSS屬性足夠大/足夠小，就可以簡單地加載新圖像。如果可能的話，我建議只加載一個更大的圖像;更少的http請求以及更少的加載時間。

---

1. 一旦當前座標之間的距離，通過一定的閾值，保理在變焦量你可以加載圖像。

---

3. 通過滾動，你的意思左右平移或縮放嗎？

有幾種方法可以實現滾動縮放效果。一種方法是將一個不可見的元素放在具有指定內部高度的所有內容上，這就需要一個滾動條。當用戶滾動此元素時，在比較scrollHeight-clientHeight和scrollTop屬性後，該事件可能會導致通常縮放的相同事件。

對於平移，更改圖像包裝的left和top屬性很簡單。

---

我希望所有這一切都有所幫助。