案例:html案例     状态:可编辑再运行    进入竖版
 运行结果 
x
 
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
<style type="text/css"> 
5
body
6
{
7
font-size:70%;
8
font-family:verdana,helvetica,arial,sans-serif;
9
}
10
</style>
11
12
<script type="text/javascript"> 
13
function cnvs_getCoordinates(e)
14
{
15
x=e.clientX;
16
y=e.clientY;
17
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
18
}
19
 
20
function cnvs_clearCoordinates()
21
{
22
document.getElementById("xycoordinates").innerHTML="";
23
}
24
</script>
25
</head>
26
27
<body style="margin:0px;">
28
29
<p>把鼠标悬停在下面的矩形上可以看到坐标:</p>
30
31
<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
32
<br />
33
<br />
34
<br />
35
<div id="xycoordinates"></div>
36
 
37
 
38
</body>
39
</html>
40