jquery - 通过鼠标按钮手动滑动图像

Question

我有两张图片。说图像A和B。我想在一个div中显示图像A和B 50% 50%。现在用户可以滑动该图像以查看其他完整(100％)图像。就像想看到 B 滑到 A 左侧一样。怎么做？我不知道。我想用 html、jquery、css 来实现。

通过单击红色圆圈并将其拖动到左侧，用户可以看到图像 B 的完整图像。同样，对于 A，将红色圆圈拖动到右侧用户可以看到图像 A 的完整图像。

Answer 1

<强> jsFiddle

在此标记中，第一个图像位于第二个图像的后面。第二张图像是向左/向右滑动的图像。

<div>
    <img src="https://placeimg.com/200/180/nature">
    <aside>
        <img src="https://placeimg.com/200/180/people">
    </aside>
</div>

我们在 jQuery 中跟踪父 div 容器上的鼠标拖动:

var $container = $('div'), // you should use a more specific selector, not just `div`
    $aside = $('aside', $container),
    parentX = $container.position().left,
    onMouseMove = function(e) {
        var left = e.clientX - parentX;
        $aside.css('left', left).children('img').css('left', -left);        
    };

$('img', $container).on('dragstart', function(e) {
    e.preventDefault(); // disable dragging img
});

$container.mousedown(function() {
    $container.on("mousemove", onMouseMove);
}).mouseup(function() {
    $container.off("mousemove", onMouseMove);
});

最后是CSS:

div {
    display: inline-block;
    width: 200px;
    height: 180px;
    position: relative;
    cursor: ew-resize;
}

div img, div aside {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

div aside {
    left: 50%;
    overflow: hidden;
    box-shadow: -5px 0 0 red;
}

div aside img {
    left: -100%;
}

<小时/>

解决方案2

这个使用更简单的标记，容器中只有两个图像。

var $container = $('div'), // you should use a more specific selector, not just `div`
    $firstImg = $('img:first-child', $container),
    $secondImg = $('img:last-child', $container),
    parentX = $container.position().left;

$container.mousemove(function(e) {
    var x = e.clientX - parentX;
    $firstImg.css('clip', 'rect(0px, ' + x + 'px, 180px, 0px)');
    $secondImg.css('clip', 'rect(0px, 200px, 180px, ' + x + 'px)');
});

div {
    display: inline-block;
    width: 200px;
    height: 180px;
    cursor: ew-resize;
}

div img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

div img:first-child {
    clip: rect(0px, 100px, 180px, 0px);
}

div img:last-child {
    clip: rect(0px, 200px, 180px, 100px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <img src="https://placeimg.com/200/180/nature">
    <img src="https://placeimg.com/200/180/people">
</div>