Question

我想知道是否可以在JS中创建可拖动的视口。我们的想法是将三个DIV叠加在一起：

顶层是一个可拖动的视口，显示最底部的DIV（图像）
中间层是一个完整覆盖底部DIV的大图像
底层是一个被中间层隐藏的大图像（除了视口中的位）

我发现了许多有用的库来制作可拖动的DIV，但我不太确定它是否可以透过中间层来透露底层。

编辑：我已经上传了我的意思图 - 视口看起来“透过”中间层，位于底层 - diagram

Answer 1

非常感谢charlietfl，我已经解决了我的问题。我已经使用JQuery UI Draggable plugin并将层数减少到两个，只需根据自己的位置调整顶部DIV（#viewport）的背景位置。

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")
    });
});

JS Draggable Viewport

1 个答案: