0

我想知道是否有可能在 JS 中创建一个可拖动的视口。这个想法是让三个 DIV 相互叠加：

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

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

编辑：我已经上传了我的意思的图表 - 视口看起来“穿过”中间层，在底层 -图表

4

1 回答 1

0

非常感谢charlietfl，我已经解决了我的问题。我使用了JQuery UI Draggable 插件并将层数减少到两个，只需根据自己的位置调整顶部 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")
    });
});
于 2012-12-16T11:24:01.643 回答