可调控侧栏

最新推荐文章于 2024-05-19 17:21:21 发布

我家空空

最新推荐文章于 2024-05-19 17:21:21 发布

阅读量65

点赞数

分类专栏：前端练习文章标签： css html

原文链接：https://www.bilibili.com/video/BV1L54y197vj?spm_id_from=333.999.0.0

版权

前端练习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

实现一个可以移动，调节两边距离的侧栏

演示如下：
在这里插入图片描述
实现思想：

使用flex构建版面
当鼠标点击中间分隔栏的位置，记录鼠标点击坐标位置
当鼠标移动时，通过鼠标新的坐标位置与点击时的坐标位置，计算出左边栏的新宽度
鼠标放开后，取消鼠标移动的事件监听
将新宽度通过localStorage储存到浏览器中，下次载入时，读取并设置左边宽度

计算左边侧栏宽度的思想：

鼠标点击下去（mousedown）时，记录当前鼠标的x坐标（startX）和当前左边侧栏的宽度（startWidth）
鼠标移动（mousemove）时，记录鼠标移动到的位置的x坐标（e.clientX）
此时，左边侧栏宽度=前左边侧栏宽度（startWidth）+鼠标移动的距离（e.clientX-startX）

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./index.js"></script>
</head>
<body>
    <div class="scalable">
        <div class="content">
            <img src="./1.jpg" alt="">
        </div>
        <div class="separator">
            <i></i><i></i>
        </div>
    </div>
    <div class="main">
        <div class="content">
            Welcome to my world!
        </div>
    </div>
</body>
</html>

CSS代码：

body{
    display: flex;
    margin: 0;
    min-height: 100vh;
}
.scalable{
    background-color: #eee;
    position: relative;
    min-width: 100px;
}
.main{
    background-color: white;
    flex: 1;
}
.content{
    padding: 20px;
}
.scalable .separator{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 100%;
    background-color: white;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, .35);
    cursor: col-resize;
}
.scalable .content{
    padding-right: 34px;
}
.scalable .separator i{
    display: inline-block;
    height: 14px;
    width: 1px;
    background-color: #e9e9e9;
    margin: 0 1px;
}
.scalable .content img{
    display: block;
    max-width: 100%;
    margin: auto;
}
/*防止选中页面元素*/
body{
    -webkit-user-select: none;
    user-select: none;
}

js代码：

window.onload = function(){
    var startX, startWidth;
    startWidth = localStorage.getItem('scalable_width') || getScalableDivWidth();
    document.querySelector('.scalable').style.width = startWidth + 'px';
    
    document.querySelector('.separator').addEventListener('mousedown', startDrag);

    function startDrag(e){
        startX = e.clientX;
        // 字符串转数字
        startWidth = getScalableDivWidth();
        console.log(startWidth);
        document.documentElement.addEventListener('mousemove', onDrag);
        document.documentElement.addEventListener('mouseup', stopDrag);
    }

    function onDrag(e){
        let newWidth = startWidth + e.clientX - startX;
        document.querySelector('.scalable').style.width = newWidth + 'px';
    }
    function stopDrag(e){
        localStorage.setItem('scalable_width', getScalableDivWidth())
        document.documentElement.removeEventListener('mousemove', onDrag);
        document.documentElement.removeEventListener('mouseup', stopDrag);
    }

    function getScalableDivWidth(){
        return parseInt(window.getComputedStyle(document.querySelector('.scalable')).width, 10);
    }
}

学习链接：JS 实现可调侧栏

我家空空

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
可调控侧栏

实现一个可以移动，调节两边距离的侧栏演示如下：实现思想：使用flex构建版面当鼠标点击中间分隔栏的位置，记录鼠标点击坐标位置当鼠标移动时，通过鼠标新的坐标位置与点击时的坐标位置，计算出左边栏的新宽度鼠标放开后，取消鼠标移动的事件监听将新宽度通过localStorage储存到浏览器中，下次载入时，读取并设置左边宽度html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="
复制链接

扫一扫