鼠标移动事件

最新推荐文章于 2024-09-12 16:31:59 发布

不仅是记忆

最新推荐文章于 2024-09-12 16:31:59 发布

阅读量495

点赞数 1

分类专栏： js 文章标签：鼠标移动事件

本文链接：https://blog.csdn.net/a916123063/article/details/51769413

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标移动事件</title>
    <style type="text/css">
        *{margin:0px;padding:0px;}
        #move{width:100px;height:100px;background:orange;font-family:microsoft yahei;position:absolute;}
    </style>
</head>
<body>
    <div id="move">当期鼠标位置<br>X:100<br>Y:200</div>
    <script type="text/javascript">
    //获取元素
    var m = document.getElementById('move');
 
    //绑定事件
    window.onmousemove = function(e){
        //获取当前鼠标的位置
        var x = e.clientX;
        var y = e.clientY;
 
        //修改div的left和top
        m.style.left = x+'px';
        m.style.top = y+'px';
 
        //拼接字符串
        var str = "当期鼠标位置<br>X:"+x+"<br>Y:"+y;
 
        //修改标签文本
        m.innerHTML = str;
 
    }
 
    </script>
</body>
</html>