使用jquery在弹出div显示鼠标坐标，继鼠标移动

我需要能够检查HTML页面内的各种元素位置。为此，我需要一个将鼠标坐标显示为靠近鼠标光标的弹出框的div。使用jquery在弹出div显示鼠标坐标，继鼠标移动

2014-05-20 razvanone

<html> 
<head> 
<title>Mouse positioning in jQuery</title> 
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script> 
<style> 
#click{ 
    background-color:#efefef; 
    width:300px; 
    height:50px; 
    text-align:center; 
    font:1.2em Arial; 
    line-height:50px; 
    display:none; 
    position:absolute; 
    z-index:9999; 
} 
</style> 
<script> 
$(document).ready(function(){ 
    //$(document).click(function(e){ // for click action 
    $(document).mousemove(function(e){ 
     // e.pageX - gives you X position 
     // e.pageY - gives you Y position 
     //$('#click').html('e.pageX = ' + e.pageX + ', e.pageY = ' + e.pageY); 
     $("#click").css({left:(e.pageX+20) + "px", top:(e.pageY+20) + "px"}); 
     $('#click').html('e.pageX = ' + e.pageX + ', e.pageY = ' + e.pageY); 
     $('#click').show(); 
     //$('#click').slideToggle(); // for toggle show/hide popup 
    }); 
}); 
</script> 
</head> 
<body> 
On mouse move... 

<div id="click">The cursor position will show in this div.</div> 

</body> 
</html>

来源

2014-05-20 12:32:09 razvanone

这是怎么回事？ http://jsfiddle.net/LwxLx/ – TCHdvlp

使用jquery在弹出div显示鼠标坐标，继鼠标移动

回答

相关问题