快捷導(dǎo)航

JavaScript實(shí)現(xiàn)鼠標(biāo)控制自由移動(dòng)的窗口

更新時(shí)間：2021年06月22日 10:23:15 作者：妄癡夢(mèng)中

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)控制自由移動(dòng)的窗口，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)鼠標(biāo)控制自由窗口的具體代碼，供大家參考，具體內(nèi)容如下

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用鼠標(biāo)移動(dòng)的窗口</title>
    <style>
        .mainDiv {
            width: 350px;
            height: 200px;
            border: 2px black solid;
            position: absolute;
        }

        .titleDiv {
            width: 350px;
            height: 30px;
            background-color: YellowGreen  ;
            text-align: center;
            line-height: 30px;
        }

        .contentDiv {
            width: 350px;
            height: 170px;
            background-color: SandyBrown ;
            text-align: center;
        }
    </style>
</head>
<body>
<!--onmousedown：事件會(huì)在鼠標(biāo)按鍵被按下時(shí)發(fā)生; onmousemove：事件會(huì)在鼠標(biāo)指針移到指定的對(duì)象時(shí)發(fā)生-->
<div class="mainDiv" id="mainDiv" style="top: 20px;left: 20px">
    <div class="titleDiv" id="titleDiv" onmousedown="mouseDown()" onmouseup="mouseUp()">
        標(biāo)題欄
    </div>
    <div class="contentDiv">
        《鼠標(biāo)可控的自由窗口》<br>
        注意：沒(méi)有給mainDiv設(shè)置position為absolute前不能移動(dòng)
    </div>
</div>
<script>
    var dx;
    var dy;
    var mainDivObj = null;
    var titleDivObj = null;

    /**
     * 鼠標(biāo)按下函數(shù)，當(dāng)鼠標(biāo)按下時(shí)執(zhí)行該函數(shù)
     */
    function mouseDown() {
        //獲得鼠標(biāo)的鍵值，0是鼠標(biāo)左鍵；1是鼠標(biāo)滾軸鍵；2是鼠標(biāo)右鍵
        if (event.button == 0) {
            mainDivObj = document.getElementById("mainDiv");
            titleDivObj = document.getElementById("titleDiv");
            //設(shè)置鼠標(biāo)樣式
            titleDivObj.style.cursor = "move";
            //設(shè)置主div的陰影樣式
            mainDivObj.style.boxShadow = "0px 0px 10px #000";
            //獲得鼠標(biāo)當(dāng)前坐標(biāo)
            let x = event.x;
            let y = event.y;
            dx = x - parseInt(mainDivObj.style.left);
            dy = y - parseInt(mainDivObj.style.top);

        }
    }

    //鼠標(biāo)移動(dòng)的時(shí)候調(diào)用
    document.onmousemove = mouseMove;

    /**
     * 按下鼠標(biāo)后移動(dòng)函數(shù)，當(dāng)鼠標(biāo)移動(dòng)是執(zhí)行該函數(shù)，移動(dòng)div
     */
    function mouseMove() {
        if (mainDivObj != null) {
            //獲得鼠標(biāo)當(dāng)前移動(dòng)的坐標(biāo)位置
            let x = event.x;//鼠標(biāo)移動(dòng)的x軸的坐標(biāo)
            let y = event.y;//鼠標(biāo)移動(dòng)的y軸的坐標(biāo)
            //計(jì)算div移動(dòng)后的left與top的距離
            //使用當(dāng)前坐標(biāo)減去鼠標(biāo)在div中的位置與div左邊與頂端的距離
            let left = x - dx;
            let top = y - dy;
            //設(shè)置div新的坐標(biāo)位置
            mainDivObj.style.left = left + "px";
            mainDivObj.style.top = top + "px";
        }
    }
    /**
     * 鼠標(biāo)松開(kāi)函數(shù)，當(dāng)鼠標(biāo)松開(kāi)時(shí)執(zhí)行該函數(shù)
     */
    function mouseUp() {
        if (mainDivObj != null) {
            dx = null;
            dy = null;
            //設(shè)置div的陰影樣式
            mainDivObj.style.boxShadow="none";
            mainDivObj = null;
            titleDivObj.style.cursor="pointer";
            titleDivObj = null;
        }
    }
</script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: