SOURCE

var Scale = function (btn, bar, step) {
    this.btn = $(btn)[0];
    this.bar = $(bar)[0];
    this.step = $(step)[0];
    this._offsetLeft = 0;
    this.init();
};
Scale.prototype = {
    init: function () {
        var _this = this,
            _document = document,
            _window = window,
            _Math = Math;
        _this.btn.onmousedown = function (e) {
            var x = (e || _window.event).clientX;
            var l = _this._offsetLeft;
            var max = _this.bar.offsetWidth;
            _document.onmousemove = function (e) {
                var thisX = (e || _window.event).clientX;
                var to = _Math.min(max, _Math.max(-2, l + (thisX - x)));
                _this.btn.parentNode.parentNode.style.left = to + "px";

                _this.ondrag(_Math.round(_Math.max(0, to / max) * 100), to);
                _window.getSelection ?
                    _window.getSelection().removeAllRanges() :
                    _document.selection.empty();
            };
            _document.onmouseup = new Function("this.onmousemove=null");
        };
    },
    ondrag: function (pos, x) {
        this._offsetLeft = x;
        this.step.style.width = Math.max(0, x) + "px";
        if (!pos) {
            this.btn.parentNode.parentNode.style.left = x + "px";
        }
        // console.log(pos + "%");
    },
    render: function () {
        var _this = this;
        this.bar.className = "tran deviation TransformActive";
        this._offsetLeft = this.bar.offsetWidth / 2;
        this.ondrag(0, this._offsetLeft);
        setTimeout(function () {
            _this.bar.className = "deviation TransformActive";
        }, 1000);
    },
};
var _scale = new Scale("#move-btn", "#move-box", "#pattern-atNight");
setTimeout(() => {
    _scale.render();
}, 100)

<div id="move-box">
	<div class="pattern-atNight" id="pattern-atNight">
		<img src="https://p1.ssl.qhimg.com/t0103d9e6604579270c.jpg" alt="夜间模式" draggable="false">
        </div>
        <div class="pattern-day">
            <img src="https://p5.ssl.qhimg.com/t01556df2aa6ab462bc.jpg" alt="白天模式" draggable="false">
        </div>
        <div class="pattern-move">
            <span>
                <p id="move-btn">move</p>
            </span>
        </div>       
    </div>

 #move-box {
     margin: 48px auto 0;
     width: 956px;
     height: 538px;
     position: relative
 }
 
 .pattern-atNight,
 .pattern-day {
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0;
     top: 0;
     z-index: 1;
     overflow: hidden
 }
 
 .pattern-atNight {
     z-index: 2;
     width: 0
 }
 
 #move-box.tran .pattern-atNight,
 #move-box.tran .pattern-move {
     transition: all 1s
 }
 
 #move-box img {
     height: 100%;
     display: block;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none
 }
 
 .deviation {
     opacity: 0;
     position: relative;
     top: 40px;
     text-align: center
 }
 
 .TransformActive.deviation {
     opacity: 1;
     top: 0;
     transition: opacity 0.8s, top1s;
     -moz-transition: opacity 0.8s, top 1s;
     -webkit-transition: opacity 0.8s, top 1s;
     -o-transition: opacity 0.8s, top 1s;
     -ms-transition: opacity 0.8s, top 1s
 }
 
 .pattern-move span {
     background-image: url("https://p3.ssl.qhimg.com/t013f97b19bc4e4745d.png");
     background-size: 100% 100%
 }
 
 .pattern-move {
     width: 4px;
     height: 100%;
     background: #00d26e;
     position: absolute;
     top: 0;
     left: 0;
     z-index: 3
 }
 
 .pattern-move span {
     width: 160px;
     height: 160px;
     position: absolute;
     left: 0;
     top: 50%;
     margin: -80px -80px
 }
 
 .pattern-move span p {
     width: 64px;
     height: 64px;
     position: absolute;
     left: 50%;
     top: 50%;
     margin: -32px -32px;
     font-size: 0px;
     cursor: grab
 }