javascript - 谷歌地图风格滚动任何人？

Question

我正在寻找一些能够滚动图像的 JavaScript 插件（最好是 jQuery），就像谷歌地图的工作方式一样。

我可以使图像可拖动，但即使父 div 是overflow:hidden.

任何帮助将不胜感激！

score 10 · Accepted Answer

（我在这个现已死去的派对上迟到了，但是，嘿，我通过搜索找到了这个页面，所以......）

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

score 3 · Accepted Answer

查看谷歌地图图像切割器它可以拍摄任何图像或数码照片并将其切割成显示在谷歌地图上的瓷砖。可能是一种快速的方法来做你需要的......

score 3 · Accepted Answer

我参加聚会可能有点晚了，但我只是在寻找同样的东西。我偶然发现的是jquery的滚动视图，它运行完美，并且完全可以为溢出的 div 执行类似谷歌地图的拖动到滚动。

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

您将看到图像切片和切块是如何在幕后工作的。和变焦。

score 1 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

谷歌地图使用分割成块的图像，当用户在不同方向平移时动态加载这些图像。谷歌地图图像切割器保罗迪克森提到的是你想要的工具。

如果您只想平移一张大图像，而不是将图像分割成块的额外复杂性，那么您应该使用剪辑属性而不是使用 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。

所以基本技术是在用户拖动时更新 top 和 left 值，将它们与定义的视图宽度和高度一起使用到图像上来创建适当的 rect() 字符串，并更新 top、left 和 clip <img> 元素的 style 属性的属性。

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

7 回答 7