实现图片对比控件制作之CSS3新属性

效果：你可以通过拖动右下角的‘小鱼’拖动前图层移动，行程左右图片对比效果。

场合：虽然左侧图看着像一个蒙层，其实它是和底图一样的图，只是做了蒙版，该效果适用于一个时候变化前后对比。

思路解读：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新属性教程

}