当前位置: 代码迷 >> Web前端 >> 获取鼠标在图片对象下的位置
  详细解决方案

获取鼠标在图片对象下的位置

热度:125   发布时间:2012-10-24 14:15:58.0
获取鼠标在图片对象上的位置
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Mouse Test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    function getMousePosition(e){
        var x = 0, y = 0;
        var e = e || window.event;
        if (e.pageX || e.pageY) {
            x = e.pageX;
            y = e.pageY;
        } else if (e.clientX || e.clientY) {
            x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            y = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
        }
        return { 'x': x, 'y': y };
    }

    $(document).ready(function(){
        $('#mouse_test').mousemove(function(e){
            pos = getMousePosition(e);
            var mouseX = pos.x;    
            var mouseY = pos.y;    
     $('#x').attr("value",mouseX);
         $('#y').attr("value",mouseY);

           
        });
    });
</script>
</head>
<body>
    <input type="text" id="x" />
    <input type="text" id="y" />
    <img src="test.jpg" id="mouse_test" align="left">
</body>
</html>



  相关解决方案