javascript - 如何在 JS 中用户控制重叠图像

Question

我正在拼命为我的客户寻找解决方案。我有图形 - 类似这样的东西:

而且我希望能够将圆圈中心的线拖到右边或左边。它将隐藏和取消隐藏我的两个完整图像。它基本上是同一个地方的两张图片，我认为只是带有另一个 z-index。

我认为可以使用 JavaScript 来完成，但我不知道该选项有任何函数或方法。

Answer 1

这是我的解决方案:

HTML 非常简单，只有两个 div 用于图像，一个用于拖动:

<div class="img" id="img1"></div>
<div class="img" id="img2"></div>
<div id="drag"></div>

对于 CSS，重要的部分是绝对定位所有的 div 并给出背景图像。

至于 Javascript，在 jQuery 的帮助下，我们监听鼠标事件，进行一些计算并调整第二张图片的 CSS:

$('#drag').on('mousedown', function(e){
    var $self = $(this),
        dragPos = $self.position().left + $self.width()/2,
        imgWidth = $('#img1').width();

    $(document).on('mouseup', function(e){
        $(document).off('mouseup').off('mousemove');
    });

    $(document).on('mousemove', function(me){
        var mx = me.pageX - e.pageX + dragPos
        $self.css({ left: mx });

        $('#img2').css({
          width: imgWidth - mx,
          left: mx,
          backgroundPosition: -mx + 'px 0px',
        });
    });
});

从那里开始，我相信自定义它并赋予它独特的外观非常容易。希望这对您有所帮助!

JsFiddle Demo