用js写一个鼠标坐标实例

Posted 把番茄沉入海底

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用js写一个鼠标坐标实例相关的知识，希望对你有一定的参考价值。

html代码

写一个div来作为鼠标区域

div中写一个span显示坐标信息

    <body>
        <div id="">
            <span></span>
        </div>
    </body>

给div和span增加样式并定位

        <style type="text/css">
            div{
                position: relative;/* 定位信息 */
                background-color: #398439;    /* 背景颜色 */
                width: 500px;    /* 宽度 */
                height: 500px;    /* 高度 */
            }
            span{
                position: absolute;/* 绝对定位 */
                color: red;    /* 文字颜色 */
            }
        </style>

添加事件

        <script type="text/javascript">
            window.onload = function(){    
                var oDiv = document.getElementsByTagName("div")[0];//获取当元素节点
                var oSpan = oDiv.children[0];
                oDiv.onmousemove = function(e){    //鼠标移入事件
                    var evt = e || event;
                    var x = evt.offsetX;
                    var y = evt.offsetY;
                    oSpan.innerHTML = x + \',\' + y + \'px\';//显示坐标信息
                }
                /* 添加一个鼠标移出事件 */
                oDiv.onmouseout = function(){
                    oSpan.innerHTML = "";    //鼠标移除后 坐标信息消失
                }
            }
        </script>

效果图

 当鼠标移入的时候左上角显示坐标，移出隐藏。

以上是关于用js写一个鼠标坐标实例的主要内容，如果未能解决你的问题，请参考以下文章

用HTML和javascript语言写一个以鼠标为相对坐标放在图片上缩放的模块，鼠标滚轮事件

winform 添加鼠标移动监听

用PostMessage函数向窗体发送鼠标单击消息，单击的X坐标=100 ，y坐标=200.该窗体的句柄为hand。代码怎么写

js怎么获得鼠标当前坐标

js代码实现鼠标移动到上面一个效果，鼠标离开效果保持

vb后台模拟鼠标点击网页