寫一個div來做爲鼠標區域javascript
div中寫一個span顯示座標信息css
<body> <div id=""> <span></span> </div> </body>
給div和span增長樣式並定位java
<style type="text/css"> div{ position: relative;/* 定位信息 */ background-color: #398439; /* 背景顏色 */ width: 500px; /* 寬度 */ height: 500px; /* 高度 */ } span{ position: absolute;/* 絕對定位 */ color: red; /* 文字顏色 */ } </style>
添加事件spa
<script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementsByTagName("div")[0];//獲取當元素節點 var oSpan = oDiv.children[0]; oDiv.onmousemove = function(e){ //鼠標移入事件 var evt = e || event; var x = evt.offsetX; var y = evt.offsetY; oSpan.innerHTML = x + ',' + y + 'px';//顯示座標信息 } /* 添加一個鼠標移出事件 */ oDiv.onmouseout = function(){ oSpan.innerHTML = ""; //鼠標移除後 座標信息消失 } } </script>
效果圖code
當鼠標移入的時候左上角顯示座標,移出隱藏。blog