无js实现拖拽边框改变大小的笔记

news2024/11/20 20:37:58

前言

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

具体原理

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

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

具体效果和代码

效果

在线演示
- https://codepen.io/superbiubiuman/pen/oNMQxKz
图

代码

<!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>