伸缩相册

知识点

这个伸缩相册(点此查看 DEMO)是之前不经意间看到一个案例,本以为是通过 JS 去操作的 left 数值完成的,F12 了一下才知道仅仅是用 label~ 兄弟选择符。感觉思路很好,所以整理一下,分享给大家。

HTML 结构

先将 HTML 结构放出来。labelinput 并行,是因为用到兄弟选择符,如果 label 包含着 input 就没法用兄弟选择符去选择其他的 label 标签了。

1
2
3
4
5
6
7
8
9
10
11
12
<label for="a1"></label>
<input type="radio" name="album" id="a1">
<label for="a2"></label>
<input type="radio" name="album" id="a2">
<label for="a3"></label>
<input type="radio" name="album" id="a3">
<label for="a4"></label>
<input type="radio" name="album" id="a4">
<label for="a5"></label>
<input type="radio" name="album" id="a5">
<label for="a6"></label>
<input type="radio" name="album" id="a6">

CSS 样式

先介绍下兄弟选择符 ~

语法:E~F { sRules }
说明:选择 E 元素后面的所有兄弟元素 F,元素 E 与 F 必须同属一个父级。
参考:http://css.doyoe.com/selectors/relationship/e-brother-f.htm

这个选择符只选择 E 之后的所有 F,不必紧邻,不包含之前、不包含子级。

先写布局代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.box {
position: relative;
width: 664px;
height: 404px;
margin: 50px auto;
border: 15px solid #5d75b1;
border-radius: 10px;
overflow: hidden;
}
.box label {
position: absolute;
top: 0;
width: 300px;
height: 400px;
border: 2px solid #333;
}
.box label:nth-of-type(1) {
background: url('img/pic1.png');
left: 0;
}
.box label:nth-of-type(2) {
background: url('img/pic2.png');
left: 72px;
}
.box label:nth-of-type(3) {
background: url('img/pic3.png');
left: 144px;
}
.box label:nth-of-type(4) {
background: url('img/pic4.png');
left: 216px;
}
.box label:nth-of-type(5) {
background: url('img/pic5.png');
left: 288px;
}
.box label:nth-of-type(6) {
background: url('img/pic6.png');
left: 360px;
}
.box input {
display: none;
}

注意:这里用了 :nth-of-type 来查找所有同类,如果用 :nth-child 会因为中间有 input 导致失效。

界面显示如下:

接下来用 input:checked 属性来判断选中的元素是哪一个,用 ~ 来选择之后的元素向右推移 图片宽度(300) - 已经显示出来的宽度(72) = 228px。

代码如下:

1
2
3
.box input:checked ~ label {
transform: translateX(228px);
}

点击某个 label 之后,界面显示如下:

点击之后就会发现过渡很生硬,所以给 label 加个 transition 过渡时间。

1
2
3
.box label {
transition: 1s;
}

效果美美哒!

坚持原创技术分享,您的支持将鼓励我继续创作!