js实现可调节侧栏

最新推荐文章于 2024-11-15 19:33:30 发布

cc_Crt

最新推荐文章于 2024-11-15 19:33:30 发布

阅读量199

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/cc_Crt/article/details/129179204

该代码示例展示了一个使用HTML、CSS和JavaScript实现的页面布局，其中左侧栏可以通过拖动右侧的分割条来调整宽度。宽度值在释放鼠标时保存在本地存储中，以便页面刷新后能保持之前的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        html,body {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
        .app {
            height: 100%;
            display: flex;
            user-select: none;
        }
        .leftBox {
            background-color: seagreen;
            min-width: 200px;
            position: relative;
        }
        .content {
            padding: 20px;
        }
        .content img  {
            display: block;
            width: 100%;
            max-height: calc(100vh - 50px);
            margin: 0 auto;
        }
        .drag {
            width: 12px;
            height: 100%;
            background-color: aliceblue;
            position: absolute;
            right: 0px;
            top: 0px;
            cursor: col-resize;
        }
        .rightBox {
            flex: 1;
            background-color: aqua;
            min-width: 200px;
        }
    </style>

    <div class="app">
        <div class="leftBox">
            <div class="content">
                <img src="http://img.duoziwang.com/2018/06/2018010130213237.jpg" alt="">
            </div>
            <div class="drag"></div>
        </div>
        <div class="rightBox"></div>
    </div>

    <script>
        function Drag() {
            this.drag_el = document.querySelector('.drag')
            this.leftBox_el = document.querySelector('.leftBox')
            this.leftBox_el_width = '200px'
            this.moveDistance_fn = null
        }
        Drag.prototype.updata = function(leftBox_el_width = '200px') {
            this.leftBox_el_width = leftBox_el_width
        }
        Drag.prototype.init = function() {
            this.updata(JSON.parse(localStorage.getItem('left_width')))
            this.leftBox_el.style.width = this.leftBox_el_width
            this.drag_el.addEventListener('mousedown', this.move.bind(this))
            document.addEventListener('mouseup', this.removeEvent.bind(this))
        }
        Drag.prototype.move = function(e) {
            document.addEventListener('mousemove', this.moveDistance(this))
        }
        Drag.prototype.removeEvent = function() {
            document.removeEventListener('mousemove', this.moveDistance_fn)
        }
        Drag.prototype.moveDistance = function(that) {
             this.moveDistance_fn = function moveDistance_fn(e) {
                that.leftBox_el.style.width = e.clientX+ 'px'
                that.leftBox_el_width = localStorage.setItem('left_width', JSON.stringify(that.leftBox_el.style.width))
            }
            return this.moveDistance_fn
        }
        new Drag().init() 
    </script>
</body>
</html>