加载，滚动，放大和缩小图像像谷歌地图

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属性很简单。

---

我希望所有这一切都有所帮助。