當前位置：軟件學堂 > 資訊首頁 > 網(wǎng)絡編程 > 編程其他 > JS代碼實現(xiàn)狀態(tài)欄顯示鼠標位置

JS代碼實現(xiàn)狀態(tài)欄顯示鼠標位置

2012/10/23 12:23:47作者：佚名來源：網(wǎng)絡

移動端

【實例名稱】

狀態(tài)欄顯示鼠標位置

【實例描述】

 為了讓DIV層可以跟隨鼠標，層的控制通常需要獲取鼠標的位置。本例學習如何獲取鼠標的X和Y坐標。


【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標題頁</title>
<script language=javascript>
//移動鼠標的方法
function move(e){
if (document.layers) { var x=e.pageX; var y=e.pageY;}
if (document.all) { var x=event.x; 
var y=event.y+document.body.scrollTop;}
status="x:"+x+" y:"+y;   //組合鼠標的x,y坐標
}
document.onmousemove = move;    //鼠標移動時綁定move方法
if (document.layers) document.captureEvents(Event.MOUSEMOVE);
</script>
</head>
<body>
</body>
</html>

【運行效果】

運行效果

【難點剖析】

本例的重點Event對象，其用來描述JavaScript的事件。Event對象的“x”屬性用來獲取鼠標指針位置相對于窗口客戶區(qū)域的x坐標，其中客戶區(qū)域不包括窗口自身的控件和滾動條。Event對象的“y”屬性表示y坐標。

【源碼下載】

本實例JS代碼下載

 

標簽： JS代碼  鼠標