HTML代碼 寫一個div來作為滑鼠區域 div中寫一個span顯示坐標信息 <body> <div id=""> <span></span> </div> </body> 給div和span增加樣式並定位 <style type="text/css"> div{ position: relativ ...
HTML代碼
寫一個div來作為滑鼠區域
div中寫一個span顯示坐標信息
<body> <div id=""> <span></span> </div> </body>
給div和span增加樣式並定位
<style type="text/css"> div{ position: relative;/* 定位信息 */ background-color: #398439; /* 背景顏色 */ width: 500px; /* 寬度 */ height: 500px; /* 高度 */ } span{ position: absolute;/* 絕對定位 */ color: red; /* 文字顏色 */ } </style>
添加事件
<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>
效果圖
當滑鼠移入的時候左上角顯示坐標，移出隱藏。
