鼠標移動可改變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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。