# 交互式图片对比控件
1️⃣ resize solution
2️⃣ Range-input control solution
<style>
.main-image-slider {
width: 100%;
display: flex;
flex-direction: column;
}
.main-image-slider h5 {
margin: 30px 30px 15px;
}
.main-image-slider div.image-slider {
position: relative;
}
.main-image-slider div.image-slider img {
display: block;
user-select: none;
max-width: initial;
}
.main-image-slider div.image-slider > img {
width: 100%;
}
.main-image-slider div.image-slider > div > img {
height: 100%;
}
.main-image-slider div.image-slider > div {
width: 50%;
position: absolute;
top: 0; left: 0; bottom: 0;
overflow: hidden;
}
.main-image-slider section:nth-of-type(1) div.image-slider > div {
max-width: 100%;
resize: horizontal;
}
.main-image-slider section:nth-of-type(1) div.image-slider > div::before {
content: "";
width: 12px; height: 12px;
position: absolute;
right: 0px; bottom: 0px;
padding: 5px;
cursor: ew-resize;
background: linear-gradient(-45deg, #E8E2D6 50%, transparent 0);
background-clip: content-box;
filter: drop-shadow(0 0 2px rgba(0, 0, 0, .8));
}
.main-image-slider section:nth-of-type(2) div.image-slider input {
width: 100%;
position: absolute;
left: 0; bottom: 10px;
margin: 0;
cursor: ew-resize;
}
.main-image-slider input[type=range]::-webkit-slider-thumb {
appearance: none;
margin-top: -3px;
width: 10px; height: 10px;
background-color: #E8E2D6;
border: none;
border-radius: 100%;
mix-blend-mode: luminosity;
transform: translateY(-1px);
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
}
.main-image-slider input[type=range]::-webkit-slider-runnable-track {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
width: 100%; height: 6px;
cursor: pointer;
border-radius: 2px;
border: none;
background-color: #E8E2D6;
}
</style>
<template>
<div class="main-image-slider" ref="main">
<section>
<h5>1️⃣ resize solution</h5>
<div class="image-slider">
<div>
<img src="https://cdn-static.learntech.cn/upload/2020-11/2333501tPQum.jpg!min" alt="Before" />
</div>
<img src="https://cdn-static.learntech.cn/upload/2020-11/233439cj3zLc.jpg!min" alt="After" />
</div>
</section>
<section>
<h5>2️⃣ Range-input control solution</h5>
<div ref="slider" class="image-slider range">
<img ref="sliderImg" src="https://cdn-static.learntech.cn/upload/2020-11/2333501tPQum.jpg!min" alt="Before" />
<img src="https://cdn-static.learntech.cn/upload/2020-11/233439cj3zLc.jpg!min" alt="After" />
</div>
</section>
</div>
</template>
<script>
export default {
mounted() {
let div = document.createElement('div');
let range = document.createElement('input');
const { slider, sliderImg } = this.$refs;
slider.insertBefore(div, sliderImg);
div.appendChild(sliderImg);
range.type = 'range';
range.oninput = ({ target: { value } }) => {
div.style.width = `${value}%`;
};
slider.appendChild(range);
}
}
</script>
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
显示代码 复制代码 复制代码