如何在jQuery中使用.hover事件获取html坐标？

大家可以帮助我如何创建一个包含xy坐标的工具提示吗？这里是我的示例代码：如何在jQuery中使用.hover事件获取html坐标？

<style type="text/css"> 
     a img { 
      border: 3px solid blue; 
     } 

     #largeImage { 
      position: absolute; 
      padding: .5em; 
      background: #e3e3e3; 
      border: 1px solid #bfbfbf; 
     } 
    </style> 

    <script type="text/javascript"> 
     $(function() { 
      var offsetX = 20; 
      var offsetY = 10; 

      $('a').hover(function(e) { 
       var href = $(this).attr('href'); 

       var x = e.pageX - this.offsetLeft; 
       var y = e.pageY - this.offsetTop; 

       $('<div id="largeImage">' + 'X: ' + x + ' Y: ' + y + '</div>') 
       .css('top', e.pageY + offsetY) 
       .css('left', e.pageX + offsetX) 
       .appendTo('body'); 
      }, function() { 
       $('#largeImage').remove(); 
      }); 

      $('a').mousemove(function(e) { 
       $('#largeImage') 
       .css('top', e.pageY + offsetY) 
       .css('left', e.pageX + offsetX); 
      }); 
     }); 
    </script> 

<body> 
    <a href="Images/FredLarge.jpg"> 
     <img src="Images/FredSmall.jpg" alt="squidward" /> 
    </a> 
</body>

在这个例子中发生的事情是坐标没有改变。虽然它获取坐标，但不会改变。

*此代码实际上就像图像的工具提示，所以只需忽略id名称即可。

来源

2012-04-03 kimbebot

hover不连续发射。它只会在你移动时触发一次，当你移出时只会触发一次。所以这就是为什么它不随鼠标移动。改为尝试绑定到mousemove。 jQuery文档甚至有一个将鼠标悬停在正方形上并显示坐标的示例。

来源

2012-04-03 02:36:02 mrtsherman

谢谢！现在我知道在网上没有这样的教程的原因。 – kimbebot 2012-04-03 03:12:10

如何在jQuery中使用.hover事件获取html坐标？

回答

相关问题