我正在寻找一些JavaScript插件(最好是jQuery)，以便能够以与Google Maps相同的方式滚动浏览图像。

我可以使图像可拖动，但是即使父div是overflow：hidden，也可以在拖动时看到整个图像。

任何帮助将不胜感激！

解决方案

回答

我们可以使用google maps api ...它们允许我们将其与自定义图像一起使用。我们可以选择是否显示控件。

编辑：找到了关于如何做到这一点的体面的教程。
http://mapki.com/wiki/Add_Your_Own_Custom_Map

回答

签出Google Maps图像切割器它可以拍摄任何图像或者数码照片，并将其切成显示在Google Map上的图块。可能是一种快速完成所需工作的方法。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

回答

这与javascript无关，而与CSS编码更多。

尝试使用HTML和CSS进行一些实验，以使图像正确地裁剪，然后添加javascript进行移动。

如果我们无法使用HTML剪辑它，或者使用javascript进行移动，则可以在此处对问题进行最简单的演示，以供我们调试。

没有代码，我们将在黑暗中射击。

回答

为了更好地描述基础技术，请查看Pragmatic Programmers的《 Pragmatic Ajax》一书的第4章(如果我没记错的话)。

我们将在封面下看到图像切片和切块的工作方式。和缩放。

回答

Google地图使用切成块的图像，这些块会随着用户向不同方向平移而动态加载。保罗·迪克森(Paul Dixon)提到的Google Maps Image Cutter是我们想要的工具。

如果只想平移一个大图像，而不是将图像切成块，则没有额外的复杂性，则应该使用clip属性，而不是使用CSS溢出属性。如果我没记错的话，所有值得考虑的浏览器都支持此功能，直到IE4.

需要注意的一点是：CSS2.1规范显示了示例，其中rect值用逗号分隔。但是IE6不支持此功能(可能也不是IE7)。但是，所有其他浏览器都理解该版本，没有逗号。所以代替

clip: rect(5px, 40px, 45px, 5px);

你应该用

clip: rect(5px 40px 45px 5px);

为了兼容性。

我们需要在<img>元素周围将容器<div>设置为position：relative，然后将其设置为position：absolute。

因此，基本技术是在用户拖动时更新顶部和左侧的值，将这些值与视图的定义宽度和高度一起使用，以在图像上创建适当的rect()字符串，并更新顶部，左侧和剪辑<img>元素的style属性的属性。

不要做我所做的事情，在rect()字符串中的值之后留" px"。我花了很长时间才意识到为什么它不起作用:-)

回答

我参加聚会可能有点晚，但我只是在寻找相同的东西。我偶然发现的是jquery的scrollview，它的工作原理非常完美，并且确实针对溢出的divs进行了类似于google maps的拖动滚动。

回答

(对于现在这个死党来说，我来晚了，但是，嘿，我通过搜索找到了这个页面，所以...)

mooware建议的Scrollview插件对我不起作用。

但是Dragscrollable确实做到了：
http://plugins.jquery.com/project/Dragscrollable

尝试示范