如何在固定div中显示图像以制作可滚动图像面板？

Question

我正在制作一个照片库脚本，涉及在固定宽度/高度框中显示图像。现在我希望该图像以完整的尺寸显示。我的意思是，如果该框是700x300像素，图像不应调整为700x300，但应以其自己的全分辨率显示。如果可能的话，我可以以某种方式让它在框中拖动，以便可以完全查看它吗？

任何帮助将不胜感激。

Answer 1

要制作一个可拖动的窗格，您需要两个元素，一个外部div作为容器，一个内部div作为“画布”。外部容器的样式需要设置为overflow: hidden。

<div id="drag-container">
    <div id="drag-canvas"><img></div>
</div>

接下来，您需要使内部画布可拖动。在内部的mouseDown上，调用一个设置变量dragging = true的函数。在mouseUp上调用一个将其设置为false的函数。您还需要将鼠标位置存储在mouseDown上并减去内部div的顶部和左侧位置，以便将其用作偏移量。

然后在mouseMove上根据鼠标位置设置内部画布的顶部和左侧位置。不要忘记添加偏移量，以便内部画布从您抓取它的点拖动，否则div的左上角将捕捉到鼠标位置。

还有一些库，例如JQuery UI，它们具有可以直接应用于div的“可拖动”方法，从而简化了此过程。真正的关键是让外部容器设置为隐藏溢出。