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

Question

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

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

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

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

灣 如果用戶點擊“放大”，那么它應該加載並顯示下一層大圖像，如谷歌地圖，如果我點擊縮小，那么它顯示前一層小圖像。

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

請幫忙

此致，Asif Hameed

Answer 1

有點亂，但這里有一些建議：

---

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

為此，您可以將可調整大小的divider元素放在另一個元素中。 包含元素的overflow為none ，並保持相同的大小。 這樣，您可以根據手指的位置（假設您希望觸摸設備使用此位置）和div內的位置獲得准確的坐標。

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

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

---

1.當前坐標之間的距離超過某個閾值時，您可以加載圖像，從而計算出縮放量。

---

3.通過滾動，你的意思是平移或放大？

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

對於平移，只需更改圖像包裝器的left和top屬性即可。

---

我希望所有這些都有所幫助。