JavaScript 設(shè)計(jì)鼠標(biāo)跟隨

■知識點(diǎn)

當(dāng)事件發(fā)生時(shí)，利用事件對象的坐標(biāo)屬性可以獲取鼠標(biāo)指針的位置，說明如表所示。

■實(shí)例設(shè)計(jì)

    設(shè)計(jì)一個函數(shù)，根據(jù)事件對象獲取鼠標(biāo)指針的坐標(biāo)值，設(shè)置該對象為絕對定位，絕對定位的值為鼠標(biāo)指針當(dāng)前的坐標(biāo)值。定義形參為：對象引用指針、相對鼠標(biāo)指針的偏移距離以及事件對象。

var pos = function(o, x, y,event){        //鼠標(biāo)指針定位賦值函數(shù)

    var posX = 0, posY = 0;               //臨時(shí)變量值 

    var e = event || window.event;        //標(biāo)準(zhǔn)化事件對象

    if(e.pageX || e.pageY){               //獲取鼠標(biāo)指針的當(dāng)前坐標(biāo)值

        posX = e.pageX;

        posY = e.pageY;

    }

    else if(e.clientX |丨 e.clientY){

        posX = e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;

        posY = e.clientY + document.documentElement.scrollTop + document.body.scrollTop;

    }

    o.style.position = "absolute";    //定義當(dāng)前對象為絕對定位

    o.style.top = (posY + y) + "px";  //用鼠標(biāo)指針的y軸坐標(biāo)和傳入偏移值設(shè)置對象y軸坐標(biāo) 

    o.style.left = (posX + x) + "px"; //用鼠標(biāo)指針的x軸坐標(biāo)和傳入偏移值設(shè)置對象x軸坐標(biāo)

}

    下面為document對象注冊鼠標(biāo)移動事件處理函數(shù)，并傳入鼠標(biāo)定位封裝函數(shù)，傳入的對象為<div>元素，設(shè)置其位置向鼠標(biāo)指針右下方偏移（10,20)的距離。考慮到DOM事件模型通過參數(shù)形式傳遞事件對象，所以不要忘記在調(diào)用函數(shù)中還要傳遞事件對象。

<div id="divl">鼠標(biāo)跟隨</div>

<script>

var divl = document.getElementByld("divl");

document.onmousemove = function(event){

    pos(divl, 10, 20,event);

}

</script>