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