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

题

我正在寻找一些 JavaScript 插件（最好是 jQuery），以便能够滚动图像，就像谷歌地图作品。

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

任何帮助将不胜感激！

解决方案

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

其他提示

（我来这个已经死了的派对已经太晚了，但是嘿，我通过搜索找到了这个页面，所以......）

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

查看谷歌地图图像切割器它可以拍摄任何图像或数码照片并将其切割成图块并显示在谷歌地图上。可能是完成您需要的事情的快速方法......

您可以使用谷歌地图 API...它们允许您将其与自定义图像一起使用。您可以选择是否显示控件。

编辑：找到了一个关于如何执行此操作的不错的教程。http://mapki.com/wiki/Add_Your_Own_Custom_Map

有关底层技术的详细描述，请参阅《实用程序员》一书的第 4 章（如果我没记错的话）务实的 Ajax.

您将了解图像切片和切割的幕后工作原理。还有缩放。

这与 javascript 关系不大，而与 CSS编码.

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

如果您无法使用 HTML 进行剪辑，或者使用 javascript 进行移动，请在此处发布最简单的问题演示供我们调试。

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

Google 地图使用切成块的图像，当用户向不同方向平移时动态加载这些块。这谷歌地图图像切割器 Paul Dixon 提到的是您想要的工具。

如果您只想平移一张大图像，而不是将图像切成块的额外复杂性，那么您应该使用夹子财产。所有值得考虑的浏览器都支持这一点，如果我没记错的话，直到 IE4。

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

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

你应该使用

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

为了兼容性。

您需要将容器 <div> 设置为position:relative 围绕<img> 元素，然后将其设置为position：绝对。

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

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

许可以下： CC-BY-SA 和归因