境界線をドラッグしてメモのサイズを変更するためのjsはありません

序文

最近Douyinで「Choose Love」というゲームを見ました.この人が手動でドラッグしているのを見るのはとても面白かったです.フロントエンドで実現できるのではないかと思ったので,学び、学ぶことができます.最終的な効果はそれほどではありませんが. 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>

境界線をドラッグしてメモのサイズを変更するためのjsはありません

序文

具体原理

特定の効果とコード

効果

コード

参照リンクと記事

おすすめ