0

I was wondering if it is at all possible to create a draggable viewport in JS. The idea is to have three DIVs layered on top of each other:

  • Top layer is a draggable viewport that reveals the bottom-most DIV (image)
  • Middle layer is a large image that covers the bottom DIV entirely
  • Bottom layer is a large image that is hidden by the middle layer (apart from the bit in the viewport)

I've found many helpful libraries to make a draggable DIV, but am not so sure that it is possible to make it see through the middle layer to reveal the bottom layer.

EDIT: I've uploaded a diagram of what I mean - The viewport looks "through" the middle layer, at the bottom layer - diagram

4

1 に答える 1

0

With many thanks to charlietfl, I have solved my problem. I've used the JQuery UI Draggable plugin and dropped the number of layers down to two, simply adjusting the background position of the top DIV (#viewport) based on its own position.

HTML:

<body>
    <div id="container">
        <div id="viewport"></div>
    </div>
</body>

CSS:

#container {
    width: 1600px;
    height: 817px;
    background-image: url("assets/images/extras2/extras-top.jpg");
    position: relative;
}

#viewport {
    width: 338px;
    height: 235px;
    position: absolute;
    left: 300px;
    top: 20px;
    background-image: url("assets/images/extras2/extras-bottom.jpg");
    background-position: -300px -20px;
}

JS:

jQuery(function($){
    $("#viewport").draggable({containment: "#container", scroll: false});
    $("#viewport").on("drag", function(){
        $(this).css("background-position", "-" + $(this).position().left + "px -" + $(this).position().top + "px")
    });
});
于 2012-12-16T11:24:01.643 に答える