我需要能够检查html页面中的各种元素位置。为此,我想要一个div,它将鼠标坐标显示为靠近鼠标光标的弹出窗口。
答案 0 :(得分:0)
<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>