画像のビフォー・アフターが出来るやつ
Result
jQuery
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()});
});
});
css
#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;
}
html
<div id="comparing">
<p id="l"><img src="befor.jpg"></p>
<p id="r"><img src="after.jpg"></p>
<p id="sld"><span id="sld_l"><</span><span id="sld_r">></span></p>
</div>
via
びふぉーあふたー – jsdo.it