JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="image-dif">
    <img src="http://www.dr.dk/nyheder/htm/baggrund/generel/normandybeach-nj-1.jpg" />
    <img src="http://www.dr.dk/nyheder/htm/baggrund/generel/normandybeach-nj-2.jpg" />
</div>

CSS

.image-dif {
    position: relative;
    float: left;
    -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
.image-dif img {
    display: block;
    pointer-events: none;
}
.image-dif > div {
    position: absolute;
    top: 0;
    left: 0;
    background: transparent none 0 0 no-repeat;
    border-right: 2px solid #CCC;
    width: 50%;
    height: 100%;
    z-index: 1;
}
.image-dif > div:after {
    content: " ";
    position: absolute;
    display: block;
    top: 50%;
    right: 0;
    margin-right: -5px;
    margin-top: -28px;
    width: 8px;
    height: 56px;
    background-color: green;   
    z-index: 2; 
}

JavaScript

var addEvent = (window.addEventListener) ?
    function (element, event, func) {
        element.addEventListener(event, func, false);
    } :
    function (element, event, func) {
        element.attachEvent("on" + event, func);
    };

var removeEvent = (window.removeEventListener) ?
    function (element, event, func) {
        element.removeEventListener(event, func, false);
    } :
    function (element, event, func) {
        element.detachEvent("on" + event, func);
    };

var difs = document.querySelectorAll("div.image-dif"),
    count = difs.length;

for (var i = 0; i < count; i++) {
    (function (dif) {
        var img = dif.querySelector("img"),
            layer = document.createElement("div"),
            rect = img.getBoundingClientRect(),
            style = layer.style;
        style.backgroundImage = "url(" + img.src + ")";
        dif.replaceChild(layer, img);
        function set(x) {
            style.width = Math.min(rect.right - rect.left - 2, Math.max(0, x - 1)) + "px";
        }
        function start (e) {
            move(e);
            addEvent(document, "mousemove", move);
            addEvent(document, "mouseup", stop);
            return false;
        }
        function move (e) {
            e = e || window.event;
            set(e.clientX - rect.left);  
            return false;     
        }
        function stop () {
            removeEvent(document, "mousemove", move);
            removeEvent(document, "mouseup", stop);
        }
        addEvent(dif, "mousedown", start);
    }(difs[i]));
}