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


loading, scrolling , zoom in and zoom out the images like google map

我正在开发一个web应用程序。我只是想知道怎么做。它就像一个地图应用程序,但不是地图。

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

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

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

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

有人能告诉我如何构建这个应用程序吗。我已经检查了OpenLayers,地理服务器和ajax缩放。我不想选择地理服务器,因为它不是地图应用程序。但我需要地图的相同功能。我应该使用jquery插件来做这件事吗。

请帮助

谨致问候,Asif Hameed

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


2。使用CSS的zoom属性可以很容易地实现放大和缩小。坚硬的部分在特定的位置放大。

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

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

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


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


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

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

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


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