javascript - 如何使用鼠标单击并拖动在较小的 div 中滚动大图像?

标签 javascript jquery html css draggable

我想在一个 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>

编辑:
我想自己实现它以获取知识,第 3 方框架是最后的选择。

最佳答案

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

关于javascript - 如何使用鼠标单击并拖动在较小的 div 中滚动大图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30102895/

相关文章:

javascript - 我可以将 JavaScript 对象存储在 mySQL 数据库中吗?

javascript - 在 jquery 中动态创建步骤号

javascript - 具体什么会成功触发 JSFiddle 中的 JavaScript 点击事件?

html - 在 ios 上禁用 html Canvas 绘图的滚动/滑动操作

html - Css摆动功能不起作用

JavaScript - 转换日期和时间(Chart.js 和 Moment.js)

javascript - 如何设计 sweetAlert

javascript - 日期时间选择器的图标未显示

javascript - "Different"视差滚动效果

html - 导航菜单中的悬停效果(wordpress)