jQuery“手工工具”模拟图像（只是指向正确的方向）

Question

我一直在谷歌搜索，我找不到我想要的东西。我真的不知道这究竟是什么，所以我会尽力描述它。我正在寻找一种方法来模拟各种图像编辑器中的“手工工具”。我想将一个大图像（比如说1024x1024）放在一个500x500的div中。然后，用户可以使用手工工具“抓取”图像并围绕它滚动（想想谷歌地图，但有一个大图像）。有没有人知道有助于我的教程或插件。

Answer 1

您可以使用的提示：

1. 外部DIV或视图端口需要position: relative;和overflow: hidden;

2. 内部IMG（您要使用鼠标拖动和移动的内容）需要position: absolute;

3. 移动/平移逻辑如下：

   • 当用户在IMG上按下鼠标时 - 设置一个标志，表示正在进行移动

   • 当用户将鼠标移到文档上时 - 如果设置了移动标志，则根据x和y坐标更新IMG的位置（通过更改style.left和style.top属性）获取回调中收到的事件对象

   • 当用户按下或离开鼠标按钮时 - 将moving-flag设置为false

这是一个非常错误小提琴，你可以用作开始：http://jsfiddle.net/SPXmB/1/