前一段日本地震,网易深度搞了一个专题:日本地震前后对比图像。效果很炫,出现后各种被模仿,跟风研究了下代码。
自己做了个Demo,点击查看效果:Demo
原理
1、添加两个div:before和after,并通过absolute定位将二者叠放在一起
2、分别设置这两个div的背景图片为要对比的图片。
3、通过mouseover事件控制上层的那个div的宽度。
4、remove原来的图片
jQuery部分的源码
$(function(){
$(‘.beforeafter’).each(function(){
var $afterimg=$(this).find(‘img[rel=after]‘);
var $beforeimg=$(this).find(‘img[rel=before]‘);
$(this).append(”
“).find(‘.after’).width($afterimg.width()).height($afterimg.height())
.css({“background”:”url(“+$afterimg.attr(’src’)+”)”});
$(this).append(”
“).find(‘.before’).width($beforeimg.width()).height($beforeimg.height())
.css({“background”:”url(“+$beforeimg.attr(’src’)+”)”});
var offset=$(this).find(‘.before’).offset().left;
$(this).mousemove(function(event){
if((event.clientX-offset)50)
{
$(this).find(‘.before’).width(event.clientX-offset)
.css(“border-right”,”5px solid #333″);
};
});
$afterimg.remove();
$beforeimg.remove();
})
});
css部分源码
.show{
margin:20px 0 20px 0 ;
}
.beforeafter {
position: relative;
}
.before{
position:absolute;
left:0px;
top:0px;
}
PS:注意由于absolute布局不占据流空间,故after和before的position不能同时定义为absolute,否则后面的布局就出问题了。
//===============================================