Result
http://jsfiddle.net/kachibito/mt3gz/101/embedded/result,js,css,html
jQuery
class="before"にだけwidh="130"をつける $('.before-after li').addClass("rollover").filter(".before").css('width', 130); //マウスムーブイベント発火 $('.before-after').addClass("active").mousemove(function(e) { var $el = $(this); w = e.pageX - $el.offset().left; $('.before').css('width', w); }); $('.before-after li img').mousedown(function(event) { //マウスが外れたらイベントをキャンセルする event.preventDefault(); });
css
.before-after{ border:1px solid #333; display:block; list-style:none; margin:30px auto; overflow:hidden; position:relative; width:500px; } .before-after.active{ height:320px; } .rollover { display:block; overflow:hidden; position:absolute; } .active .before { border-right:3px solid #000; } .before { left:0px; top:0px; z-index:2; } .after { right:0px; top:0px; z-index:1; }
html
<ol class="before-after"> <li class="before"> <img src="bar.jpg" /> </li> <li class="after"> <img src="foo.jpg" /> </li> </ol>