php - 加载、滚动、放大和缩小图像，如谷歌地图

Question

我正在开发一个网络应用程序。我只想知道怎么做。它就像一个 map 应用程序，但不是 map 。

我需要在来自 mysql 数据库的 div 内的网页上显示 100 张图像。每个图像将显示在特定的预定义图 block 上。我想要以下功能主义者。

1. 加载图像(不是所有图像)
2. 放大和缩小。像 map 一样更新图像。
3. 滚动。像 map 一样更新图像。

一个。我的 div 只能显示 25 张图片。我只想在该区域加载 25 张图像。剩余图像应滚动加载或放大和缩小。

如果用户点击“放大”，那么它应该加载并显示下一层大图像，就像在谷歌地图中一样，如果我点击缩小，那么它会显示上一层小图像。

谁能告诉我如何构建此应用程序。我已经检查了 OpenLayers、geo server 和 ajax-zoom。我不想选择地理服务器，因为它不是 map 应用程序。但我需要 map 的相同功能。我应该使用 jquery 插件来执行此操作吗？

请帮忙

问候，阿西夫·哈米德

Answer 1

有点乱，但这里有一些建议:

---

2。使用 CSS 的 zoom 属性可以轻松实现放大和缩小。困难的部分是在特定位置放大。

为此，您可以将可调整大小的分隔元素放入另一个元素中。包含元素的 overflow 为 none，并保持相同的大小。这样，您就可以根据手指的位置(假设您希望触摸设备使用它)和 div 内的位置获得准确的坐标。

如果您只是在桌面上放大，请将原点变量设置为屏幕中心。

就更改图像而言，只要设置的 CSS 属性足够好/足够小，您就可以简单地加载新图像。但是，如果可能的话，我建议只加载一次更大的图像；更少的 http 请求和更少的加载时间。

---

1.一旦当前坐标之间的距离超过某个阈值，您就可以加载图像，并考虑缩放量。

---

3。滚动是指四处移动还是放大？

有几种方法可以实现滚动缩放效果。一种方法是在具有指定内部高度的所有内容上放置一个不可见元素，这需要一个滚动条。当用户在此元素中滚动时，在比较 scrollHeight-clientHeight 和 scrollTop 属性后，该事件可能会引发与正常缩放相同的事件。

对于平移，只需更改图像包装器的 left 和 top 属性即可。

---

我希望所有这些对您有所帮助。