var slide = (function(){ var minX = 0; var maxX = 500; return function(_x){ var offset = $("#r").css("left"); offset = offset.slice(0,offset.indexOf("px"))*1; offset = offset + _x; var offset2 = $("#r").css("width"); offset2 = offset2.slice(0,offset2.indexOf("px"))*1; offset2 = offset2 + (_x*-1); if(offset > minX && offset < maxX){ $("#r").css({ left:offset+"px", width:offset2+"px" }); $("#r img").css({ marginLeft:-offset+"px" }); $("#sld").css({ left:offset+"px" }); }; } })(); $(function(){ $("#sld span").bind("mousedown",function(e){ var _x = e.pageX; $("#comparing").bind("mousemove",function(e){ slide(e.pageX - _x); _x = e.pageX; }); $("#comparing").bind("mouseup",function(e){$(this).unbind()}); }); });
#comparing{ position:relative; width:500px; height:375px; margin:10px 0 0 10px; overflow:hidden; -webkit-user-select:none; -moz-user-select:none; } #comparing p{ display:block; position:absolute; } img{border:1px solid red;} #l{ width:500px; height:375px; } #r{ width:250px; overflow:hidden; height:375px; left:250px; } #r img{margin-left:-250px} #sld{ left:250px; top:50%; width:40px; height:25px; margin:-22px 0 0 -22px; border:1px solid red; } #sld:after{clear:both} #sld span{ width:20px; height:25px; display:block; color:#FFF; line-height:25px; text-align:center; background:#444; } #sld span::selection{ background:none; } #sld_l{ cursor:w-resize; float:left; } #sld_r{ cursor:e-resize; float:right; }
<div id="comparing"> <p id="l"><img src="http://farm5.staticflickr.com/4094/4945641446_24d6eec747.jpg" width="500" height="356"></p> <p id="r"><img src="http://farm4.staticflickr.com/3265/5830732436_b0da41d70b.jpg" width="500" height="356"></p> <p id="sld"><span id="sld_l"><</span><span id="sld_r">></span></p> </div> <a href="">Image by tibchris</a> CC-BY