效果：你可以通过拖动右下角的‘小鱼’拖动前图层移动，行程左右图片对比效果。
场合：虽然左侧图看着像一个蒙层，其实它是和底图一样的图，只是做了蒙版，该效果适用于一个时候变化前后对比。
思路解读：css3提供了类似于textarea可以改变宽高的属性resize：none/horizontal 水平拉动/vertical 垂直拉动。如果使用JQ配合input的range类型，其实很简单，这里是使用纯CSS实现。
① CSS实现
HTML如下：
CSS如下：
.img-content{
position:relative;
display:inline-block;
}
.cont {
position:absolute;
top:0;
left:0;
bottom:0;
width:50%;
overflow:hidden; //防止内容溢出
resize:vertical; //水平拉动
max-width:100%; //防止前图超出容器宽度
}
.cont:before{
content:'';
width: 30px;
height: 30px;
position:absolute;
right:0;
bottom:0;
background:linear-gradient(-45deg, #fff 50%, transparent 0); //小鱼渐变
background-size: 15px;
cursor: ew-resize; //提高用户体验，展现自释性
}
img {
display:block;
user-select:none; //防止误操作，导致图片被选中，详见css3新属性教程
}
