如何使用鼠标单击和拖动在较小的 div 中滚动大图像？

Posted 2023-05-08

技术标签:

【中文标题】如何使用鼠标单击和拖动在较小的 div 中滚动大图像？【英文标题】：How to scroll a large image inside a smaller div using mouse click and drag? 【发布时间】：2015-07-18 03:12:52 【问题描述】：

我想在 div 中放置一个大图像，并让用户使用鼠标滚动图像（单击并拖动到所需的方向）。怎样才能达到这种效果？

CSS：

#image
    position: relative;
    margin: 0 auto;
    width: 600px;
    height: 400px;
    top: 300px;
    background: url("http://www.treasurebeachhotel.com/images/property_assets/treasure/page-bg.jpg") no-repeat;

html：

<div id="image"></div>

编辑：我想自己实现这个以获取知识，3rd 方框架是最后的手段。

【问题讨论】：

刚刚发现了这个库。它很棒，并且可以通过手机完美响应：interactjs.io 它可能会对您有所帮助 【参考方案1】：

<html>
    <body>
        <div style="width:200;height:200;overflow:scroll;">
            <img src="/home/james/Pictures/scone_ontology.png" />
        </div>
    </body>
</html>

【讨论】：

【参考方案2】：

查看 jQuery UI Draggable。第一个示例听起来就像您正在尝试做的那样： https://jqueryui.com/draggable/

【讨论】：

【参考方案3】：

所以你只想要 600w 400h div，里面有一个“地图”，你可以滚动并用鼠标查看？你已经很接近了。

有一个您希望最终产品占用的大小的 div。确保将其 css 设置为 overflow:scroll;。然后将您的图像放入此 div 中。你的图片当然也可以是 div 的背景图片。

就是这样。

一个很酷的技巧是用overflow:hidden 将所有这些包裹在一个稍微小一点的div 中。小到足以隐藏丑陋的滚动条。但这可能是不好的可用性。

【讨论】：

overflow:scroll 似乎不适用于图像，我无法滚动浏览图像。

以上是关于如何使用鼠标单击和拖动在较小的 div 中滚动大图像？的主要内容，如果未能解决你的问题，请参考以下文章