JavaScript 设计鼠标跟随

■知识点

当事件发生时，利用事件对象的坐标属性可以获取鼠标指针的位置，说明如表所示。

■实例设计

    设计一个函数，根据事件对象获取鼠标指针的坐标值，设置该对象为绝对定位，绝对定位的值为鼠标指针当前的坐标值。定义形参为：对象引用指针、相对鼠标指针的偏移距离以及事件对象。

var pos = function(o, x, y,event){        //鼠标指针定位赋值函数

    var posX = 0, posY = 0;               //临时变量值 

    var e = event || window.event;        //标准化事件对象

    if(e.pageX || e.pageY){               //获取鼠标指针的当前坐标值

        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";    //定义当前对象为绝对定位

    o.style.top = (posY + y) + "px";  //用鼠标指针的y轴坐标和传入偏移值设置对象y轴坐标 

    o.style.left = (posX + x) + "px"; //用鼠标指针的x轴坐标和传入偏移值设置对象x轴坐标

}

    下面为document对象注册鼠标移动事件处理函数，并传入鼠标定位封装函数，传入的对象为<div>元素，设置其位置向鼠标指针右下方偏移（10,20)的距离。考虑到DOM事件模型通过参数形式传递事件对象，所以不要忘记在调用函数中还要传递事件对象。

<div id="divl">鼠标跟随</div>

<script>

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

document.onmousemove = function(event){

    pos(divl, 10, 20,event);

}

</script>