js模拟浏览器控制台实现改变控制台宽高demon

缤芬治

于 2023-03-14 18:14:06 发布

阅读量412

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_43760238/article/details/129535970

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
        }

        .big-container {
            height: 100vh;
            display: flex;
        }

        .left {
            flex: 1;
            overflow: auto;
        }

        .slider {
            width: 10px;
            background: gray;
            cursor: ew-resize;
        }

        .right {
            width: 200px;
            background: pink;
        }
    </style>
</head>

<body>
    <div id="container" class="big-container">
        <div class="left">dgere</div>
        <div id="slider" class="slider"></div>
        <div id="right" class="right"></div>
    </div>
    <script type="text/javascript"> 
        var dragging = false
        let initPageX, initPageY
        slider.addEventListener('mousedown', onMousedown);
        function onMousedown(event) {
            event.preventDefault()
            dragging = true
            initPageY = event.pageY;
            initPageX = event.pageX;

        }

        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
        function onMouseMove(event) {
            if (dragging === false) {
                return
            }
            slider.style.cursor = 'ew-resize'
            var { pageX, pageY } = event;
            var width = right.offsetWidth;
            console.log(initPageX, pageX)
            if (pageX - initPageX >= 5) {
                let aa = width - (pageX - initPageX);
                right.style.width = `${aa}px`
            } else if (pageX - initPageX <= 5) {
                let bb = width + (initPageX - pageX);
                right.style.width = `${bb}px`
            }

            initPageY = event.pageY;
            initPageX = event.pageX;

        }

        function onMouseUp(event) {
            dragging = false
        }




    </script>

</body>

</html>