$(document).ready(function() { var newW = $("#before img").width(); var newH = $("#before img").height(); $("#handle, #vBar").hover( function() {$(this).css('cursor','pointer');}, function() {$(this).css('cursor','auto');} ); $("#handle, #vBar").mousedown(function() { $(window).mousemove(function(event) { if (event.pageX >= newW){ $("#handle, #vBar").css("left", newW+"px"); $("#before").width(newW); } else if (event.pageX <= 0) { $("#handle, #vBar").css("left", 0+"px"); $("#before").width(0); } else { $("#handle, #vBar").css("left", event.pageX+"px"); $("#before").width(event.pageX); } }); }); $(window).mouseup(function() { $(window).unbind("mousemove"); }); $("#before img, #after img").css({ 'width': newW+'px', 'height': newH+'px' }); $("#container, #before, #after").css({ 'width': newW+'px', 'height': newH+'px' }); $("#vBar").height(newH).css('left', newW/2+"px"); $("#handle").css({ 'left': newW/2+'px', 'height': newH*.2+'px', 'margin-top': '-'+newH*.1+'px', 'top': newH/2+'px' }); $("#before").width(newW/2); });
<div id="container" unselectable='on' onselectstart='return false;' onmousedown='return false;'> <div id="after" unselectable='on' onselectstart='return false;' onmousedown='return false;'> <img src="http://s17.postimg.org/5ne25n9m7/after.jpg" /> </div> <div id="before" unselectable='on' onselectstart='return false;' onmousedown='return false;'> <img src="http://s7.postimg.org/3owlvvfu3/before.jpg" /> </div> <div id="vBar"></div> <div id="handle"></div> </div>
body, #container, #before, #after { position:absolute; top:0; left:0; margin:0px; padding:0px; border:0px; overflow:hidden; } img { position:absolute; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } #vBar { position:absolute; background-color:#0000FF; width:2px; margin-left:-1px; } #handle { position:absolute; background-color:#66FF66; width:10px; margin-left:-5px; }