자 바스 크 립 트 는 마우스 가 자 유 롭 게 이동 하 는 창 을 제어 합 니 다.

본 논문 의 사례 는 자바 스 크 립 트 가 마우스 로 자유 창 을 제어 하 는 구체 적 인 코드 를 공유 하 였 으 며,구체 적 인 내용 은 다음 과 같다.

코드:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>        </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:              ; onmousemove:                  -->
<div class="mainDiv" id="mainDiv" style="top: 20px;left: 20px">
    <div class="titleDiv" id="titleDiv" onmousedown="mouseDown()" onmouseup="mouseUp()">
           
    </div>
    <div class="contentDiv">
        《         》<br>
          :   mainDiv  position absolute     
    </div>
</div>
<script>
    var dx;
    var dy;
    var mainDivObj = null;
    var titleDivObj = null;

    /**
     *       ,           
     */
    function mouseDown() {
        //       ,0     ;1      ;2     
        if (event.button == 0) {
            mainDivObj = document.getElementById("mainDiv");
            titleDivObj = document.getElementById("titleDiv");
            //      
            titleDivObj.style.cursor = "move";
            //   div     
            mainDivObj.style.boxShadow = "0px 0px 10px #000";
            //        
            let x = event.x;
            let y = event.y;
            dx = x - parseInt(mainDivObj.style.left);
            dy = y - parseInt(mainDivObj.style.top);

        }
    }

    //         
    document.onmousemove = mouseMove;

    /**
     *          ,           ,  div
     */
    function mouseMove() {
        if (mainDivObj != null) {
            //             
            let x = event.x;//     x    
            let y = event.y;//     y    
            //  div    left top   
            //           div     div        
            let left = x - dx;
            let top = y - dy;
            //  div      
            mainDivObj.style.left = left + "px";
            mainDivObj.style.top = top + "px";
        }
    }
    /**
     *       ,           
     */
    function mouseUp() {
        if (mainDivObj != null) {
            dx = null;
            dy = null;
            //  div     
            mainDivObj.style.boxShadow="none";
            mainDivObj = null;
            titleDivObj.style.cursor="pointer";
            titleDivObj = null;
        }
    }
</script>
</body>
</html>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기