admin管理员组

文章数量:1332383

I want to place a large image inside a div and let the user scroll through the image using the mouse (click and drag to the desired direction). How can this effect be achieved?

CSS:

#image{
    position: relative;
    margin: 0 auto;
    width: 600px;
    height: 400px;
    top: 300px;
    background: url(".jpg") no-repeat;
}

HTML:

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

EDIT:
I want to implement this myself in order to gain knowledge, 3rd party frameworks are last resort.

I want to place a large image inside a div and let the user scroll through the image using the mouse (click and drag to the desired direction). How can this effect be achieved?

CSS:

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

HTML:

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

EDIT:
I want to implement this myself in order to gain knowledge, 3rd party frameworks are last resort.

  • javascript
  • jquery
  • html
  • css
  • draggable
Share edited Oct 18, 2016 at 20:39 j08691 208k32 gold badges269 silver badges280 bronze badges asked May 7, 2015 at 13:42 AlexAlex 2,0724 gold badges42 silver badges76 bronze badges 1
  • 2 Just discovered this library. It is awesome and perfectly respond with phones : interactjs.io it might help you – Béranger Commented May 7, 2015 at 13:46
Add a ment  | 

3 Answers 3

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

Check out jQuery UI Draggable. The first example sounds like exactly what you are trying to do: https://jqueryui./draggable/

So you just want 600w 400h div, with a "map" inside that you can scroll around and look at with the mouse? You're very close already.

Have a div with the size you want the end-product to take up. Make sure you set its css to overflow:scroll;. Then put your image inside this div. Your image can ofcourse also be the background-image of a div.

And that's it.

A cool trick would be to wrapp all this up in a div that is slightly smaller, with overflow:hidden. Just small enough to hide ugly scrollbars. But that might be bad usability.

本文标签： javascriptHow to scroll a large image inside a smaller div using mouse click and dragStack Overflow

版权声明：本文标题：javascript - How to scroll a large image inside a smaller div using mouse click and drag? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742296286a2448794.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。