鼠标移动可改变DIV的大小

时间 2019-11-12

标签鼠标移动可改变 div 大小栏目无线繁體版

原文原文链接

DIV固定在页面的某个位置，不可拖拽javascript

位于页面左边，鼠标点击且移动，向右移拉大，向左移缩小：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DIV位于页面左边，点击鼠标且左右移动可改变其宽度</title>
        <style type="text/css">
            .box{
                width: 100px;
                height:200px;
                border:2px solid red;
                position: absolute;
                top: 10px;
                left: 10px;
                cursor: e-resize;
            }
            .sonBox{
                width:100%;
                height:100%;
                cursor: default;
            }
        </style>
    </head>
    <body>
        <div id="box" class="box"  onmousedown="startDrag()" >
            <div class="sonBox" >
            </div>
        </div>
        <script type="text/javascript">
            var finalWidth = 100; //最后的宽度
            var wi = 100; //初始宽度
            var dragable = false;//默认不可拖拽
            var oldW = '';//记录第一次的鼠标位置
            var startDrag = function(event){
                dragable = true;
                var e=event?event:window.event;
                oldW = e.pageX; //记录第一次的鼠标位置
                //鼠标松开
                document.onmouseup=function(){
                    if(dragable){
                        finalWidth = wi;
                        dragable = false;
                    };
                };
                //鼠标指针移动
                document.onmousemove = function(event){
                    if(dragable){
                        var e=event?event:window.event;
                        var box = document.getElementById('box');
                        wi =  e.pageX - oldW  + parseInt(finalWidth);
                        if(wi<100 || wi==100){//div最低宽度
                            box.style.width = '100px';wi = '100px';
                            return;
                        }
                        if(wi>400 || wi==400){//div最高宽度
                            box.style.width = '400px';wi = '400px';
                            return;
                        }
                        box.style.width = wi + 'px';
                    };
                };
            };
        </script>
    </body>
</html>

位于页面右边，鼠标点击且移动，向右移缩小，向左移拉大：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DIV位于页面右边，点击鼠标且左右移动可改变其宽度</title>
        <style type="text/css">
            .box{
                width: 100px;
                height:200px;
                border:2px solid red;
                position: absolute;
                top: 10px;
                right: 10px;
                cursor: e-resize;
            }
            .sonBox{
                width:100%;
                height:100%;
                cursor: default;
            }
        </style>
    </head>
    <body>
        <div id="box" class="box"  onmousedown="startDrag()" >
            <div class="sonBox" >
            </div>
        </div>
        <script type="text/javascript">
            var finalWidth = 100; //最后的宽度
            var wi = 100; //初始宽度
            var dragable = false;//默认不可拖拽
            var oldW = '';//记录第一次的鼠标位置
            var startDrag = function(event){
                dragable = true;
                var e=event?event:window.event;
                oldW = e.pageX; //记录第一次的鼠标位置
                //鼠标松开
                document.onmouseup=function(){
                    if(dragable){
                        finalWidth = wi;
                        dragable = false;
                    };
                };
                //鼠标指针移动
                document.onmousemove = function(event){
                    if(dragable){
                        var e=event?event:window.event;
                        var box = document.getElementById('box');
                        wi = oldW - e.pageX + parseInt(finalWidth);
                        if(wi<100 || wi==100){//div最低宽度
                            box.style.width = '100px';wi = '100px';
                            return;
                        }
                        if(wi>400 || wi==400){//div最高宽度
                            box.style.width = '400px';wi = '400px';
                            return;
                        }
                        box.style.width = wi + 'px';
                    };
                };
            };
        </script>
    </body>
</html>

位于页面上边，鼠标点击且移动，向上移缩小，向下移拉大：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DIV位于页面上边，点击鼠标且上下移动可改变其高度</title>
        <style type="text/css">
            .box{
                width: 200px;
                height:100px;
                border:2px solid red;
                position: absolute;
                top: 10px;
                left: 10px;
                cursor: s-resize;
            }
            .sonBox{
                width:100%;
                height:100%;
                cursor: default;
            }
        </style>
    </head>
    <body>
        <div id="box" class="box"  onmousedown="startDrag()" >
            <div class="sonBox" >
            </div>
        </div>
        <script type="text/javascript">
            var finalHeight = 100; //最后的高度
            var he = 100; //初始高度
            var dragable = false;//默认不可拖拽
            var oldW = '';//记录第一次的鼠标位置
            var startDrag = function(event){
                dragable = true;
                var e=event?event:window.event;
                oldW = e.pageY; //记录第一次的鼠标位置
                document.onmouseup = function(){
                    if(dragable){
                        finalHeight = he;
                        dragable = false;
                    };
                };
                document.onmousemove = function(event){
                    if(dragable){
                        var e=event?event:window.event;
                        var box = document.getElementById('box');
                        he =  e.pageY - oldW  + parseInt(finalHeight);
                        if(he<100 || he==100){//div最低高度
                            box.style.height = '100px';he = '100px';
                            return;
                        }
                        if(he>400 || he==400){//div最高高度
                            box.style.height = '400px';he = '400px';
                            return;
                        }
                        box.style.height = he + 'px';
                    };
                };
            };
        </script>
    </body>
</html>

位于页面下边，鼠标点击且移动，向上移拉大，向下移缩小：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DIV位于页面下边，点击鼠标且上下移动可改变其高度</title>
        <style type="text/css">
            .box{
                width: 200px;
                height:100px;
                border:2px solid red;
                position: absolute;
                bottom: 10px;
                left: 10px;
                cursor: s-resize;
            }
            .sonBox{
                width:100%;
                height:100%;
                cursor: default;
            }
        </style>
    </head>
    <body>
        <div id="box" class="box"  onmousedown="startDrag()" >
            <div class="sonBox" >
            </div>
        </div>
        <script type="text/javascript">
            var finalHeight = 100; //最后的高度
            var he = 100; //初始高度
            var dragable = false;//默认不可拖拽
            var oldW = '';//记录第一次的鼠标位置
            var startDrag = function(event){
                dragable = true;
                var e=event?event:window.event;
                oldW = e.pageY; //记录第一次的鼠标位置
                document.onmouseup = function(){
                    if(dragable){
                        finalHeight = he;
                        dragable = false;
                    };
                };
                document.onmousemove = function(event){
                    if(dragable){
                        var e=event?event:window.event;
                        var box = document.getElementById('box');
                        he = oldW - e.pageY + parseInt(finalHeight);
                        if(he<100 || he==100){//div最低高度
                            box.style.height = '100px';he = '100px';
                            return;
                        }
                        if(he>400 || he==400){//div最高高度
                            box.style.height = '400px';he = '400px';
                            return;
                        }
                        box.style.height = he + 'px';
                    };
                };
            };
        </script>
    </body>
</html>