实例
<!doctype html>
<html>
<head>
<meta charset=UTF-8>
<meta name=Generator content=baidu.com>
<meta name=Author content=作者>
<meta name=Keywords content=关键词>
<meta name=Description content=文档描述信息>
<!--<link rel="stylesheet" type="text/css" href="css.css">
<link rel="icon" type="image/x-icon" href="img/标题logo">
<script type="text/javascript" src=""></script> -->
<style type="text/css">
#zb{width:500px;height:400px;
margin:100px auto 20px;
border:2px solid red;}
p{
width:500px;height:50px;
margin:0 auto;
border:2px solid pink;
line-height:50px;
}
</style>
<title>页面名称</title>
</head>
<body>
<div id="zb" >
</div>
<p>坐标为：<b id="show">(0,0)</b></p>
<script type="text/javascript">
window.onload=function(){
var divObj=document.getElementById('zb');
var showObj=document.getElementById('show');
divObj.onmousemove=function(event){
var e=event || window.event;
var m_x=e.clientX;//获取鼠标横坐标，x轴坐标
var m_y=e.clientY;//获取鼠标竖坐标，y轴坐标
//获取div的坐标
var d_x=this.offsetLeft;
var d_y=this.offsetTop;
var x=m_x-d_x;
var y=m_y-d_y;
showObj.innerHTML="("+x+","+y+")"
}
};
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
