Javascript 谷歌地图风格滚动有人吗？

我正在寻找一些JavaScript插件（最好是jQuery）能够以同样的方式滚动图像

我可以将图像设置为可拖动，但即使父div是

溢出：隐藏的

，也可以在拖动时看到整个图像

---

任何帮助都将不胜感激

您可以使用谷歌地图api……它们允许您将其用于自定义图像。您可以选择控件是否显示

编辑：找到了一个关于如何做到这一点的不错的教程。

---

查看“它可以拍摄任何图像或数码照片”，并将其切割成显示在谷歌地图上的瓷砖。这可能是一种快速完成所需任务的方法…

这与javascript关系不大，而与

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

如果你不能用HTML来剪辑它，或者用javascript来移动它，请在这里为我们调试这个问题的最简单的演示

---

如果没有代码，我们只能在黑暗中拍摄。

要了解底层技术的详细描述，请参阅实用程序员手册的第4章（如果我没记错的话）

---

您将看到在封面下图像切片和切割是如何工作的。谷歌地图使用分块的图像，当用户向不同方向平移时，这些图像会被动态加载。保罗·迪克森提到的是你想要的工具

如果您只想平移一个大图像，而不是将图像分割成块，那么您应该使用该属性，而不是使用CSS overflow属性。所有值得考虑的浏览器都支持这一点，如果我没记错的话，可以考虑IE4

需要注意的一点是：CSS2.1规范显示了用逗号分隔rect值的示例。然而，IE6（也许也不是IE7）不支持这一点。但是，所有其他浏览器都理解没有逗号的版本。所以不是

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

你应该使用

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

为了兼容性

需要在元素周围将容器设置为position:relative，然后将其设置为position:absolute

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

---

不要像我做的那样，在rect（）字符串中的值后面省略“px”。我花了很长时间才意识到它为什么不起作用：-）

我参加聚会可能有点晚，但我只是在寻找同样的东西。我偶然发现的是jquery，它工作得非常完美，就像谷歌地图一样，可以拖动滚动来查找溢出的div。

（我很晚才来到这个现在已经死了的聚会，但是嘿，我是通过搜索找到这个页面的，所以…）

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

然而，Dragscrollable没有：

---

html和css似乎确实是个问题，当不拖动时，图像会被剪切到父div中，但可拖动插件（jquery.interface）会使整个图像重新可见尽管这是公认的答案，我希望得到jquery的答案，我知道这个答案是3年前做出的。然而，我需要提到的是，谷歌正在为谷歌地图API采用付费模式；因此，如果您使用自己的图像，最糟糕的选择是使用谷歌地图。谢谢，这正是我所需要的，我已经在封面下为FutureWorks记录了它！我一直以为是显示器里的精灵在你拖动时移动了图像。。。