Question

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

CSS：

null

HTML：

#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;
}

编辑：
我想自己实现这一点以获取知识，第三方框架是最后的手段。

Answer 1

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

Answer 2

查看jQuery UI Draggable。第一个例子听起来就像你想要做的那样： https://jqueryui.com/draggable/

Answer 3

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

使用您希望最终产品占用的大小的div。确保将其CSS设置为if (PackageUtil.checkPermission(context, Manifest.permission.ACCESS_FINE_LOCATION)) {。然后将你的图像放在这个div中。您的图像也可以是div的背景图像。

就是这样。

一个很酷的技巧就是将所有这些包装在一个稍微小一点的div中，overflow:scroll;。只要小到可以隐藏丑陋的滚动条。但这可能是糟糕的可用性。

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

3 个答案: