第二十九章、交互式的图片对比控件

基于input的新type属性range可以实现一种图片对比的特效

<div class="a">
    <div class="b" id="b">
        ![](1.png)
    </div>
    ![](3.jpg)
    <input type="range" id="range" value="0">
</div>

.a{
    width: 1200px;
    height: 720px;
    margin: 100px auto;
    position: relative;
}
.a img{
    display: block;
    height: 100%;
    user-select: none;
}
.b{
    position: absolute;
    width: 50%;
    top: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}
#range{
    position: absolute;
    bottom: 10px;
    width: 50%;
    transform: scale(2);
    transform-origin: left bottom;
}

var b = document.getElementById("b");
var input=document.getElementById("range");
b.style.width=input.value+'%';
input.oninput=function () {
    b.style.width=this.value+'%';
}