4

我正在开发一个 Web 应用程序。我只是想知道如何做到这一点。它就像一个地图应用程序,但不是地图。

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

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

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

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

谁能告诉我如何构建这个应用程序。我已经检查过 OpenLayers、地理服务器和 ajax-zoom。我不想使用地理服务器,因为它不是地图应用程序。但我需要与地图相同的功能。我应该使用 jquery 插件来做到这一点。

请帮忙

问候, 阿西夫·哈米德

4

1 回答 1

1

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


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

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

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

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


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


3.滚动是指平移还是放大?

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

对于平移,只需更改图像包装器lefttop属性即可。


我希望所有这些都有帮助。

于 2012-08-04T12:27:14.010 回答