javascript實時獲取鼠標(biāo)坐標(biāo)值并顯示的方法
更新時間:2015年04月30日 10:11:46 作者:休閑生活文化
這篇文章主要介紹了javascript實時獲取鼠標(biāo)坐標(biāo)值并顯示的方法,涉及javascript操作鼠標(biāo)事件的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下
本文實例講述了javascript實時獲取鼠標(biāo)坐標(biāo)值并顯示的方法。分享給大家供大家參考。具體實現(xiàn)方法如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS實時獲取鼠標(biāo)坐標(biāo)值并顯示</title> </head> <body> <script type="text/javascript"> var getCoordInDocumentExample = function(){ var coords = document.getElementById("coords"); coords.onmousemove = function(e){ var pointer = getCoordInDocument(e); var coord = document.getElementById("coord"); coord.innerHTML = "X,Y=("+pointer.x+", "+pointer.y+")"; } } var getCoordInDocument = function(e) { e = e || window.event; var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)); var y= e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); return {'x':x,'y':y}; } window.onload = function(){ getCoordInDocumentExample(); }; </script> <div id="coords" style="width:500px;height:200px;background:#F2F1D7; border:2px solid #0066cc;"> 請在此移動鼠標(biāo)。 </div> <br /> <div id="coord" style="width:500px;border:2px solid #336699;"> </div> </body> </html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
詳解javascript對數(shù)組和json數(shù)組的操作
這篇文章主要介紹了javascript對數(shù)組和json數(shù)組的操作,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04Js為表單動態(tài)添加節(jié)點內(nèi)容的方法
這篇文章主要介紹了Js為表單動態(tài)添加節(jié)點內(nèi)容的方法,實例分析了js針對表單節(jié)點進(jìn)行添加操作的常用技巧,需要的朋友可以參考下2015-02-02js實現(xiàn)鼠標(biāo)點擊頁面彈出自定義文字效果
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)鼠標(biāo)點擊頁面彈出自定義文字效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-12-12JavaScript實現(xiàn)前端飛機大戰(zhàn)小游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)前端飛機大戰(zhàn)小游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-05-05EasyUi combotree 實現(xiàn)動態(tài)加載樹節(jié)點
這篇文章主要介紹了EasyUi combotree 實現(xiàn)動態(tài)加載樹節(jié)點的相關(guān)資料,需要的朋友可以參考下2016-04-04