如何在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

Answer 2

像this alphamask plugin这样的东西可以解决问题，但我不确定你以滑块示例的方式实现它有多简单。

Answer 3

其实很简单。第一步是让它手动工作。我将其设置如下：

<div class="wrap" id="wrap1">
  <div class="img-wrap img1"></div>
  <div class="img-wrap img2"></div>
<div>

使用CSS如下：

.wrap {
  position: relative;
  width: 300px;
  height: 300px;
}

.img-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}

.img1 {
  z-index: 1;
  background: url(bg1.png) no-repeat 0px 0px;
}

.img2 {
  z-index: 2;
  background: url(bg1.png) no-repeat 0px 0px;
}

现在有一些JavaScript（用jQuery）设置一个位置（稍后当你将滑块移到顶部时可以调用它）：

function setPosition(percentage){
  // get the width of the container
  var w = $('#wrap1').width();
  // work out the width of left panel
  var w1 = Math.floor(w * percentage);
  // and the right panel
  var w2 = w - w1;
  // set the width of the right panel
  // move it right by the width of the left panel
  // and move the background back by the width of the left panel
  $('#wrap1 .img2').css({
    width: w2,
    left: w1,
    backgroundPosition: -w1 + 'px 0px',
  });
}

您现在只需要决定如何进行拖动。您甚至可以在mouseOver上执行此操作。简单！