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

Question

我有两张照片。说图像A和B.我想在一个div中显示图像A和B 50％50％。现在，用户可以滑动该图像以查看其他完整（100％）图像。喜欢看B滑A左侧。怎么做？我什么都不知道。我想用html，jquery，css来做。

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

Answer 1

<强> jsFiddle

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

class my_report(report_sxw.rml_parse):
    def __init__(self, cr, uid, name, context):
        super(my_report, self).__init__(cr, uid, name, context=context)
        self.localcontext.update({
            'time': time,
            'precision': self.get_precision,
        })
    def get_precision(self, product):
        ...
        return precision

jQuery，我们在父<div> <img src="https://placeimg.com/200/180/nature"> <aside> <img src="https://placeimg.com/200/180/people"> </aside> </div> 容器上跟踪鼠标拖动：

div

最后是css：

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

解决方案2

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

＆＃13;

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;