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

时间:2012-08-04 12:01:21

标签: php javascript jquery

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

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

  1. 加载图像(不是全部图像)
  2. 放大并缩小。像地图一样更新图像。
  3. 滚动。像地图一样更新图像。
  4. 一个。我的div只能显示25张图片。我想在该区域只加载25张图像。剩余的图像应该在滚动或放大和缩小时加载。

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

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

    请帮忙

    此致 Asif Hameed

1 个答案:

答案 0 :(得分:1)

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


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

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

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

就更改图像而言,只要设置的CSS属性很好/足够小,就可以简单地加载新图像。如果可能,我建议只加载一次更大的图像;减少了http请求,减少了加载时间。


1。 一旦当前坐标之间的距离超过某个阈值,就可以加载图像,从而计算出缩放量。


3。 滚动,是指平移或放大?

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

对于平移,更改图像包装器的lefttop属性非常简单。


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