javascript獲取滑鼠指標在整個頁面中的座標位置
本章節分享一段程式碼例項,它實現了能夠獲取滑鼠座標在整個頁面中的座標。
這個座標也包括滾動條部分的尺寸,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{ margin:0px; padding:0px; } body{height:1500px;} #antzone{ width:200px; height:200px; background-color:#ccc; margin:0px auto; position:fixed; left:50%; top:100px; margin-left:-100px; text-align:center; } #show{ width:150px; margin:0px auto; } </style> <script type="text/javascript"> window.onload=function(){ var odiv=document.getElementById("antzone"); function getX(ev) { var ev = ev || window.event; return ev.pageX || ev.clientX + document.body.scrollLeft; } function getY(ev) { var ev = ev || window.event; return ev.pageY || ev.clientY + document.body.scrollTop; } odiv.onmousemove=function(ev){ var ev=window.event||ev; this.innerHTML="X:"+getX(ev)+" Y:"+getY(ev)+""; } } </script> </head> <body> <div id="antzone"></div> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).window.onload=function(){},當文件內容完全載入完畢再去執行函式中的程式碼。
(2).var odiv=document.getElementById("antzone"),獲取id屬性值為antzone的元素物件。
(3).function getX(ev){},此方法可以獲取滑鼠指標的水平座標位置,引數是事件物件。
(4).var ev = ev || window.event,相容所有瀏覽器的事件物件。
(5).return ev.pageX || ev.clientX + document.body.scrollLeft,如果瀏覽器支援pageX屬性,則直接使用此屬性,否則就使用在客戶區的座標再加上向左滾動的尺寸。
二.相關閱讀:
(1).var ev = ev || window.event可以參閱var ev=window.event||ev的作用是什麼一章節。
(2).clientX屬性可以參閱javascript clientX一章節。
(3).scrollLeft屬性可以參閱js scrollLeft一章節。
相關文章
- JavaScript 獲取滑鼠指標座標JavaScript指標
- JavaScript-滑鼠獲取頁面座標JavaScript
- JavaScript 獲取div在頁面中座標JavaScript
- javascript獲取滑鼠在網頁文件中的座標JavaScript網頁
- JavaScript 獲取滑鼠指標的座標JavaScript指標
- JavaScript獲取滑鼠指標座標詳解JavaScript指標
- JavaScript獲取滑鼠在文件中座標JavaScript
- JavaScript獲取滑鼠在元素中的座標JavaScript
- jQuery獲取滑鼠指標座標jQuery指標
- js獲取滑鼠在頁面中的座標簡單介紹JS
- 獲取元素在頁面中的座標位置程式碼例項
- JavaScript獲取滑鼠座標JavaScript
- js獲取滑鼠指標在顯示器螢幕中的座標JS指標
- JavaScript獲取元素在文件中座標JavaScript
- js獲取元素在頁面中的座標程式碼例項JS
- javascript獲取滑鼠在瀏覽器客戶區座標JavaScript瀏覽器
- javascript頁面元素座標JavaScript
- Java 獲取Excel分頁座標位置(單元格)JavaExcel
- js如何獲取元素在頁面中的位置JS
- Java 獲取Excel中圖片所在的行、列座標位置JavaExcel
- js獲取div相對螢幕的座標位置JS
- 滑鼠滑動獲取絕對座標方法 jqueryjQuery
- DataGridView通過滑鼠座標,獲取所在行索引View索引
- 百度地圖:根據位置獲取座標地圖
- C#/VB.NET 獲取Excel中圖片所在的行、列座標位置C#Excel
- input 獲取游標位置與設定游標位置
- 觸控事件獲取座標事件
- getBoundingClientRect方法獲取元素在頁面中的相對位置GCclient
- JavaScript獲取元素在陣列中的位置JavaScript陣列
- win10怎麼調整滑鼠指標_win10怎麼更改滑鼠指標圖案Win10指標
- Android日常學習:如何高效 & 正確地獲取View的座標位置?AndroidView
- JQuery獲取滑鼠位置jQuery
- Vue中使用MouseMove事件 獲取滑鼠座標頻率降低或事件卡頓Vue事件
- javascript獲取當前li元素在集合中的位置JavaScript
- 詳解Javascript 中的this指標JavaScript指標
- 顯示你個性的滑鼠指標(轉)指標
- javascript如何統計頁面中標籤的數量JavaScript
- JavaScript獲取li元素的下標JavaScript