zoukankan      html  css  js  c++  java
  • 获取鼠标经过位置的X、Y坐标

    利用JavaScript获取鼠标经过位置的X、Y坐标方法。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8">
    <title>XYPosition</title>

    <script language="javascript">
    function mousePosition(ev){
       if(ev.pageX || ev.pageY){
        return {x:ev.pageX, y:ev.pageY};
       }
      return {
        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        y:ev.clientY + document.body.scrollTop - document.body.clientTop
      };
    }

    function mouseMove(ev){
      ev = ev || window.event;
      var mousePos = mousePosition(ev);
      document.getElementById('xzb').value = mousePos.x;
      document.getElementById('yzb').value = mousePos.y;
    }

    document.onmousemove = mouseMove;

    /*
    function Show(el){
    //alert(el.offsetLeft);
    //alert(el.offsetLeft);
    var x = parseInt(document.getElementById('xzb').value)-el.offsetLeft;
    var y = parseInt(document.getElementById('yzb').value)-el.offsetTop;
    if (x>660 && x <760){
    if(y>140 && y <360){
    //alert(x+","+y);
    window.location.href = "index.htm";
    }
    }
    x = "X:"+x;
    y = "Y:"+y;
    //alert(x+","+y);
    }
    */
    </script>

    </head>
    <body>
    X:<input id="xzb" type="text" /> Y:<input id="yzb" type="text" /></br>
    <img id="imgPic" src="img/css_globe_diffuse2.jpg" onclick="Show(this)" />

    </body>
    </html>

  • 相关阅读:
    2
    1
    java10
    java8
    java9
    java7
    java6
    java5
    java4
    java3
  • 原文地址:https://www.cnblogs.com/monjeo/p/7754341.html
Copyright © 2011-2022 走看看