位置:首页 > 软件操作教程 > 编程开发 > JavaScript > 问题详情

JavaScript 设计鼠标跟随

提问人:刘团圆发布时间:2020-11-27

■知识点

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

兼容性

clientX

以浏览器窗口左上顶角为原点,定位x轴坐标

所有浏览器,不兼容Safari

clientY

以浏览器窗口左上顶角为原点,定位y轴坐标

所有浏览器,不兼容Safari

offsetX

以当前事件的目标对象左上顶角为原点,定位x轴坐标

所有浏览器,不兼容Mozilla

offsetY

以当前事件的Hi标对象左上顶角为原点,定位y轴坐标

所有浏览器,不兼容Mozilla

pagcX

document对象即文档窗口)左上顶角为原点,定位x轴坐标

所有浏览器,不兼容IE

pageY

document对象(即文档窗口)左上顶角为原点,定位y轴坐标

所有浏览器,不兼容IE

screenX

计算机屏幕左上顶角为原点,定位x轴坐标

所有浏览器

screenY

计算机屏幕左上顶角为原点,定位y轴坐标

所有浏览器

layerX

最近的绝对定位的父元素(如果没有,则为document对象)左上顶 角为原点,定位x轴坐标

Mozilla  Safari

layerY

最近的绝对定位的父元素(如果没有,则为document对象)左上顶 角为原点,定位y轴坐标

Mozilla  Safari

■实例设计

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

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>


继续查找其他问题的答案?

相关视频回答
回复(0)

特邀嘉宾

软件开发工程师——刘团圆

软件开发专业科班出身,擅长软件开发课程培训。

向TA咨询

该嘉宾的QQ群

更多>>
返回顶部