當(dāng)前位置:軟件學(xué)堂 > 資訊首頁(yè) > 網(wǎng)絡(luò)編程 > 編程其他 > JS代碼實(shí)現(xiàn)狀態(tài)欄顯示鼠標(biāo)位置

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

2012/10/23 12:23:47作者:佚名來(lái)源:網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱(chēng)】

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

【實(shí)例描述】

 為了讓DIV層可以跟隨鼠標(biāo),層的控制通常需要獲取鼠標(biāo)的位置。本例學(xué)習(xí)如何獲取鼠標(biāo)的X和Y坐標(biāo)。


【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>標(biāo)題頁(yè)</title> <script language=javascript> //移動(dòng)鼠標(biāo)的方法 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;   //組合鼠標(biāo)的x,y坐標(biāo) } document.onmousemove = move;    //鼠標(biāo)移動(dòng)時(shí)綁定move方法 if (document.layers) document.captureEvents(Event.MOUSEMOVE); </script> </head> <body> </body> </html>

【運(yùn)行效果】

運(yùn)行效果

【難點(diǎn)剖析】

本例的重點(diǎn)Event對(duì)象,其用來(lái)描述JavaScript的事件。Event對(duì)象的“x”屬性用來(lái)獲取鼠標(biāo)指針位置相對(duì)于窗口客戶(hù)區(qū)域的x坐標(biāo),其中客戶(hù)區(qū)域不包括窗口自身的控件和滾動(dòng)條。Event對(duì)象的“y”屬性表示y坐標(biāo)。

【源碼下載】

本實(shí)例JS代碼下載

 

標(biāo)簽: JS代碼  鼠標(biāo)