dom拉伸效果

MJ.Gina

于 2024-05-11 09:21:34 发布

阅读量185

点赞数 1

分类专栏： JS 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_35410565/article/details/138648531

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图

代码实现

场景：左边内容块可以像目录块拉伸宽度

效果图

代码实现

<!DOCTYPE html>
<html>
<head>
    <title>dom拉伸</title>
    <style>
        .box-line {
            position: absolute;
            top: 0;
            bottom: 0;
            right: -1.5px;
            width: 3px;
            height: 100%;
            cursor: e-resize;
            z-index: 99;
        }
        .box-flex {
            margin-top: 20px;
            height: 200px;
            display: flex;
            flex-flow: row;
            min-width: 1100px;
        }
        .box-right {
            position: relative;
            background-color: aquamarine;
            height: 100%;
            min-width: 160px; 
            border-right: 1px solid #666;
            box-sizing: border-box;
            max-width: 300px;
        }
        .box-left {
            flex: 1;
            background-color: rosybrown;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="box-flex">
        <div class="box-right" id="box">
            左边内容
            <div class="box-line" id="boxLine"></div>
        </div>
        <div class="box-left">右边内容</div>
    </div>
    <script>
            //通过ID找到元素 并且将它赋值给 变量oBox 
            var oBox = document.getElementById('box');
            var oBoxLine = document.getElementById('boxLine');
            //声明X 代表以后要存储的数据类型是字符串 Y同上
            var X='';
            //当鼠标点击盒子的时候触发 执行右边的函数   ev形参  向浏览器返回当前值 FireFox火狐 Chrome谷歌默认都是有一个值传进来的
            oBoxLine.onmousedown = function (ev){
                console.log('@@dowen', ev)
                //兼容IE和FireFox Chrome 只要一个为真就可以执行
                var iEvent=ev || event;
                //将盒子点击时获取的宽度赋值给W
                var W=oBox.offsetWidth;
                //将盒子点击时获取的鼠标X轴的值赋值给disX
                var disX=iEvent.clientX;
                //将盒子的鼠标点击时的距离左边的距离和盒子的宽度总和 赋值给disW
                var disxW=oBox.offsetLeft+W;
                console.log('disX', W, disX, disxW, oBox.offsetLeft)
                //这是判断是否当前点击的是盒子的四周
                //当盒子当前点击X轴的值大于 盒子的距离左边的值加盒子自身的宽度减去10像素时  就是表示已经点击到了盒子的右边框
                if(iEvent.clientX>oBox.offsetLeft+oBox.offsetWidth-3){
                    //alert('碰到了盒子的右边！');
                    //赋予上面X的值这时等于right  好用于下面的对比
                    X='right';
                }
                
                //当鼠标每移动一个像素点之时 触发 执行右边的函数  在事件前加document 是为了加大事件的作用域 移动时对整个页面文档有效 
                document.onmousemove=function (ev){
                    var iEvent=ev || event; //当当前的鼠标值减去之前获取的鼠标值为正数 那么正数加正数是增大
                    if (X=='right') {       //当当前的鼠标值减去之前获取的鼠标值为负数 那么正数加负数是变小
                        oBox.style.width=W+(iEvent.clientX-disX)+'px';
                    }                       //当当前的鼠标值减去之前获取的鼠标值为负数 那么正数减负数是负负得正 增大
                };
                //当拖动结束后 我们需要释放鼠标 添加鼠标按下松开事件 onmouseup 让鼠标点击不松 的事件为空 让鼠标每移动
                document.onmouseup=function (){  
                    X=null;
                    document.onmousemove=null;//一像素的触发的事件为空   
                }
            };
    </script>
</body>
</html>