鼠标悬浮显示区域坐标

来源:互联网 发布:爱淘宝红包领取 编辑:程序博客网 时间:2024/03/28 22:23
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">
        function cnvs_getCoordinates(e) {
            x = e.clientX;
            y = e.clientY;
            document.getElementById("xycoordinates").innerHTML = "Coordinates: (" + x + "," + y + ")";
        }
        function cnvs_clearCoordinates() {
            document.getElementById("xycoordinates").innerHTML = "";
        }
    </script>
</head>
<body style="margin:0px;">
    <p>把鼠标悬停在下面的矩形上可以看到坐标:</p>
    <div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid"
         onmousemove="cnvs_getCoordinates(event)"
         onmouseout="cnvs_clearCoordinates()"></div>
    <br />
    <br />
    <br />
    <div id="xycoordinates"></div>
</body>
</html>
0 0
原创粉丝点击