一、伸缩相册
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G00oc7sM-1644806740585)(F:/markdown专用/伸缩相册.jpg)]
效果描述:点击图片2,然后图片2变大,把后面的图片往后面挤,图片6变小;再点击图片3,图片3往左移变大,图片2变小。
实现描述:用label来绑定input,然后点击label之后,改变它后面所有label的位置。
.box label{
width:300px;
height:400px;
border:2px solid #16254c;
position:absolute;
top:0;
transition:1s;
}
.box input{
display:none;
}
.box label:nth-of-type(1){
background:url(../images/pic1.png);
left:0;
}
.box label:nth-of-type(2){
background:url(../images/pic2.png);
left:72px;
}
.box input:checked~label{
transform:translateX(230px);
-webkit-transform:translateX(230px);
}
<form>
<label for="img1"></label>
<input type="radio" id="img1" name="img"/>
<label for="img2"></label>
<input type="radio" id="img2" name="img"/>
<label for="img3"></label>
<input type="radio" id="img3" name="img"/>
</form>
对.box input:checked~label
的理解:这个选择符即:当input被点击的时候,选择它后面的所有兄弟label。然后,把他们向右移动230px.
效果图中有时候label会视觉上往左移动的原因:由于点击了图片之后,它后面的label会触发:checked
,然后点击其它图片的时候:checked
效果会重置在其它的元素上面。所以有时候会出现视觉的左移。