JavaScript實作div塊跟随滑鼠移動效果

前面講了這麼多DOM事件有關的屬性等，現在我們進行一些相關的練習，實作div塊跟随滑鼠移動效果，如圖：

HTML代碼：

CSS代碼：

*{
        margin: 0;
        padding: 0;
    }
    body{
        width: 2000px;
        height: 2000px;
    }
    #box{
        width: 200px;
        height: 200px;
        background: yellow;
        position: absolute;
    }
           

JS代碼：

var oBox=document.getElementById("box");

    document.onmousemove=function(ev){
        var ev=ev||window.event;
        // 擷取滑鼠指針坐标
        // console.log(ev.clientX,ev.clientY);
        oBox.style.top=ev.pageY+"px";
        oBox.style.left=ev.pageX+"px";
    }
           

注意： 實作功能的核心是滑鼠移動時擷取滑鼠指針的坐标，然後講坐标指派給div塊的left，top屬性。

視訊講解連結：

https://www.bilibili.com/video/BV1Cg4y1i7sr/