前言

  • 最近刷抖音看到一款游戏”拣爱”,看到这个人手动拖动的很有意思,就想着能不能前端实现,来学习学习,虽然说最终的效果没有gif图片那么好,但是也算实现了,,,,吧….

具体原理

  • 利用resize属性所出现的小拖拽条

  • 再配合::-webkit-scrollbar设置拖拽区域宽度,高度,结合opacity:0即可将可拖拽区域覆盖整个div

具体效果和代码

效果

代码

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽照片</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            width: 100%;
            height: 100%;
        }
        .pic{
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 16px 6px 0 6px;
            background: black;
        }
        /*内容区域*/
        .content{
            width: 100%;
            box-sizing: border-box;
            background: red;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            /*超出内容隐藏*/
            overflow: hidden;
        }
        /*照片区域*/
        .right,
        .left
        {
            background-position: left;
            background-size: 100vw auto;
            background-repeat: no-repeat;
        }
        .left{
            background-image: url(https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202302012011639.jpg);
            position: relative;/*为内容区提供定位*/
        }
        .right{
            background-image: url(https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202302012011607.jpg);
            flex: 1;
        }
        
        /*拖拽条*/
        .drag{
            border-right: 1px solid blue;
            /*min-width: 10vw;*/
            width: 50vw;
            height: 80vh;/*设置百分比没有效果*/
            cursor: ew-resize;
            resize: horizontal;
            overflow: scroll;
            /*隐藏拖拽条*/
            opacity: 0;
        }
        /*重要*/
        .drag::-webkit-scrollbar{
            width: 50vw;
            height: 80vh;
        }
        /*底部内容*/
        .bottom{
            height: 10%;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="pic">
        <!-- 内容区 -->
        <div class="content">
            <!-- 拖动条 -->
            <div class="left">
                <div class="drag"></div>
            </div>
            <div class="right"></div>
        </div>
        <!-- 底部 -->
        <div class="bottom"></div>
    </div>
</body>
</html>

参考链接和文章