<div class="before_after_slider">
<div class="color">
<img src="http://i.picresize.com/images/2013/04/06/9pX4.png" width="640" height="400" alt="" />
</div>
<div class="black_white">
<img src="http://i.picresize.com/images/2013/04/06/2sJzq.png" width="640" height="400" alt="black_white" />
</div>
</div>
<!-- CSS-->
.before_after_slider {
position: relative;
margin: 60px;
width: 640px;
height: 400px;
}
.before_after_slider > * {
position: absolute;
}
.black_white {
overflow: hidden;
}
<!-- JS-->
var $black_white = $('.black_white'),
img_width = $('.black_white img').width(),
init_split = Math.round(img_width/2);
$black_white.width(init_split);
$('.before_after_slider').mousemove(function(e){
var offX = (e.offsetX || e.clientX - $black_white.offset().left);
$black_white.width(offX);
});
$('.before_after_slider').mouseleave(function(e){
$black_white.stop().animate({
width: init_split
},1000)
});
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.