CSS3 resize属性
# CSS3 resize属性
# 什么是resize？
resize 属性规定是否可由用户调整元素的尺寸。
语法如下：
{
/* Keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 使用resize属性实现图片拖拽切换
我们先看一下代码，resize属性自带的滚动条比较丑，我们可以多增加一个div，将控制拖拽的功能交给这个div也就是下面的g-resize，它负责改变元素的宽度，而g-inner改为绝对定位，当g-resize宽度增大时，它也会变大。
最后将g-resize的opacity属性设为0，即可隐藏滚动条，再通过伪元素我们可以自定义一个"相对好看"一点的滚动条。
<div class="g-outer">
<div class="g-inner">
<div class="g-resize"></div>
</div>
</div>
1
2
3
4
5
2
3
4
5
.g-outer {
position: relative;
width: 650px;
height: 340px;
background-image: url(139.png);
background-size: cover;
background-position: center;
overflow: hidden;
}
.g-inner {
position: absolute;
top: 0;
left: 0;
min-width: 0;
max-width: 650px;
height: 340px;
background-image: url(160.png);
background-size: cover;
background-position: center;
box-sizing: border-box;
}
.g-resize {
position: relative;
top: 50%;
left: 0px;
resize: horizontal; /*添加左右拖拽效果*/
overflow: scroll; /*和resize配合*/
width: 0; /*默认宽度*/
height: 15px; /*滚动条高度*/
max-width: 650px;
min-width: 15px;
opacity: 0; /*隐藏滚动条*/
cursor: move;
transform: scaleY(35); /*默认是只能右下角拖动，通过放大实现全滚条上下都可拖动*/
transform-origin: center center;
}
/*借助伪元素实现一个简易滚动条*/
.g-inner::before {
content: "↔";
position: absolute;
background: rgba(0, 0, 0, 0.5);
color: #ffffff;
top: 0;
right: 0;
height: 100%;
line-height: 340px;
}
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
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
注意点：
resize的生效，需要配合overflow: scroll。当然，准确的说法是，overflow不是visible，或者可以直接作用于替换元素譬如图像、<video>及<iframe>、<textarea>等。我们可以通过
resize的horizontal、vertical、both来设置横向拖动、纵向拖动、横向纵向皆可拖动。可以配合容器的
max-width、min-width、max-height、min-height限制可拖拽改变的一个范围。
最终效果展示：
拖动滚动条右下角以实现效果
这里演示出问题了，暂时不知道怎么调整，按理来说整个滚动条都可以拖动的。
在GitHub上编辑 (opens new window)
上次更新: 2/23/2022, 5:36:03 PM