效果：你可以通過拖動右下角的‘小魚’拖動前圖層移動，行程左右圖片對比效果。
場合：雖然左側(cè)圖看著像一個蒙層，其實它是和底圖一樣的圖，只是做了蒙版，該效果適用于一個時候變化前后對比。
思路解讀：css3提供了類似于textarea可以改變寬高的屬性resize：none/horizontal 水平拉動/vertical 垂直拉動。如果使用JQ配合input的range類型，其實很簡單，這里是使用純CSS實現(xiàn)。
① CSS實現(xiàn)
HTML如下：
CSS如下：
.img-content{
position:relative;
display:inline-block;
}
.cont {
position:absolute;
top:0;
left:0;
bottom:0;
width:50%;
overflow:hidden; //防止內(nèi)容溢出
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; //提高用戶體驗，展現(xiàn)自釋性
}
img {
display:block;
user-select:none;? ?//防止誤操作，導(dǎo)致圖片被選中，詳見css3新屬性教程
}
