JS 42 获得鼠标在页面中的坐标

最新推荐文章于 2022-11-11 20:42:58 发布

肝JOJO

最新推荐文章于 2022-11-11 20:42:58 发布

阅读量137

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_34620296/article/details/102510845

版权

JavaScript 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

获得鼠标在页面中的坐标

e.clientX 返回鼠标相对于浏览器窗口可视区域的X坐标
e.clientY 返回鼠标相对于浏览器窗口可视区域的Y坐标
e.pageX 返回鼠标相对于文档页面的X坐标 IE9+支持
e.pageY 返回鼠标相对于文档页面的Y坐标 IE9+支持
e.screenX 返回鼠标相对于电脑屏幕的X坐标
e.screenY 返回鼠标相对于电脑屏幕的Y坐标

1.代码示例:

	document.addEventListener('click',function(e){
            console.log(e.pageX);           
        });

2.例题:使得图标跟随鼠标移动.
思路:
①使用鼠标移动事件 mousemove
②在页面中移动,给document注册事件
③图片要移动距离,而且不占位置,使用绝对定位
④核心原理:每次移动鼠标都获得最新的坐标,把X和Y坐标的值作为图片的top和left值就行
代码:

    <style>
        img{
            height: 52px;
            width:50px;
            position: absolute;
        }
    </style>
<body>
    <img src="img/ma.JPG" alt="">
    <script type="text/javascript">
        var pic=document.querySelector('img');
        document.addEventListener('mousemove',function(e){
            var x=e.pageX;
            var y=e.pageY;
            pic.style.left=x-25+'px';  //要记得添加px单位,并且默认鼠标在图标的左上角,调整到中间
            pic.style.top=y-26+'px';
        });
   </script>
</body>