久久久久久久视色,久久电影免费精品,中文亚洲欧美乱码在线观看,在线免费播放AV片

<center id="vfaef"><input id="vfaef"><table id="vfaef"></table></input></center>

    <p id="vfaef"><kbd id="vfaef"></kbd></p>

    
    
    <pre id="vfaef"><u id="vfaef"></u></pre>

      <thead id="vfaef"><input id="vfaef"></input></thead>

    1. 站長資訊網(wǎng)
      最全最豐富的資訊網(wǎng)站

      javascript怎樣獲取鼠標位置

      JS獲取鼠標位置的方法:1、使用clientX和clientY屬性;2、使用offsetX和offsetY屬性;3、使用pageX和pageY屬性;4、使用screenX和screenY屬性;5、使用layerX和layerY屬性。

      javascript怎樣獲取鼠標位置

      本教程操作環(huán)境:windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

      在 JavaScript中,當事件發(fā)生時,獲取鼠標的位置是件很重要的事件。由于瀏覽器的不兼容性,不同瀏覽器分別在各自事件對象中定義了不同的屬性,說明如下表所示。這些屬性都是以像素值定義了鼠標指針的坐標,但是由于它們參照的坐標系不同,導致精確計算鼠標的位置比較麻煩。

      屬性及其兼容性
      屬性 說明 兼容性
      clientX 以瀏覽器窗口左上頂角為原點,定位 x 軸坐標 所有瀏覽器,不兼容 Safari
      clientY 以瀏覽器窗口左上頂角為原點,定位 y 軸坐標 所有瀏覽器,不兼容 Safari
      offsetX 以當前事件的目標對象左上頂角為原點,定位 x 軸坐標 所有瀏覽器,不兼容 Mozilla
      offsetY 以當前事件的目標對象左上頂角為原點,定位 y 軸坐標 所有瀏覽器,不兼容 Mozilla
      pageX 以 document 對象(即文檔窗口)左上頂角為原點,定位 x 軸坐標 所有瀏覽器,不兼容 IE
      pageY 以 document 對象(即文檔窗口)左上頂角為原點,定位 y 軸坐標 所有瀏覽器,不兼容 IE
      screenX 計算機屏幕左上頂角為原點,定位 x 軸坐標 所有瀏覽器
      screenY 計算機屏幕左上頂角為原點,定位 y 軸坐標 所有瀏覽器
      layerX 最近的絕對定位的父元素(如果沒有,則為 document 對象)左上頂角為元素,定位 x 軸坐標 Mozilla 和 Safari
      layerY 最近的絕對定位的父元素(如果沒有,則為 document 對象)左上頂角為元素,定位 y 軸坐標 Mozilla 和 Safari

      示例1

      下面介紹如何配合使用多種鼠標坐標屬性,以實現(xiàn)兼容不同瀏覽器的鼠標定位設計方案。

      首先,來看看 screenX 和 screenY 屬性。這兩個屬性獲得了所有瀏覽器的支持,應該說是最優(yōu)選用屬性,但是它們的坐標系時計算機屏幕,也就是說,以計算機屏幕左上角為定位原點。這對于以瀏覽器窗口為活動空間的網(wǎng)頁來說沒有任何價值。因為不同的屏幕分辨率,不同的瀏覽器窗口大小和位置,都使得在網(wǎng)頁中定位鼠標成為一件很困難的事情。

      其次,如果以 document 對象為坐標系,則可以考慮選用 pageX 和 pageY 屬性實現(xiàn)在瀏覽器窗口中進行定位。這對于設計鼠標跟隨來說是一個好主意,因為跟隨元素一般都以絕對定位的方式在瀏覽器窗口中移動,在 mousemove 事件處理函數(shù)中把 pageX 和 pageY 屬性值傳遞給跟絕對定位元素的 top 和 left樣式屬性即可。

      IE 事件模型不支持上面的屬性,為此還需尋求兼容 IE 的方法。而看 clientX 和 clientY 屬性是以 window 對象為坐標系,且 IE 事件模型支持它們,可以選用它們。不過考慮 window 等對象可能出現(xiàn)的滾動條偏移量,所以還應加上相對于 window 對象的頁面滾動的偏移量。

      復制純文本復制
      var posX = 0, posY = 0; var event = event || window.event; if (event.pageX || event.pageY) {     posX = event.pageX;     posY = event.pageY; } else if (event.clientX || event.clientY) {     posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;     posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop; }
      var posX = 0, posY = 0; var event = event || window.event; if (event.pageX || event.pageY) {     posX = event.pageX;     posY = event.pageY; } else if (event.clientX || event.clientY) {     posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;     posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop; }

      在上面代碼中,先檢測 pageX 和 pageY 屬性是否存在,如果存在則獲取它們的值;如果不存在,則檢測并獲取 clientX 和 clientY 屬性值,然后加上 document.documentElement 和 document.body 對象的 scrollLeft 和 scrollTop 屬性值,這樣在不同瀏覽器中就獲得了相同的坐標值。

      示例2

      封裝鼠標定位代碼。設計思路:能夠根據(jù)傳遞的具體對象,以及相對鼠標指針的偏移量,命令該對象能夠跟隨水保移動。

      先定義一個封裝函數(shù),設計函數(shù)傳入?yún)?shù)為對象引用指針、相對鼠標指針的偏移距離,以及事件對象。然后封裝函數(shù)能夠根據(jù)事件對象獲取鼠標的坐標值,并設置該對象為絕對定位,絕對定位的值為鼠標指針當前的坐標值。

      封裝代碼如下:

      復制純文本復制
      var pos = function (o, x, y, event) {  //鼠標定位賦值函數(shù)     var posX = 0, posY = 0;  //臨時變量值     var e = event || window.event;  //標準化事件對象     if (e.pageX || e.pageY) {  //獲取鼠標指針的當前坐標值         posX = e.pageX;         posY = e.pageY;     } else if (e.clientX || e.clientY) {         posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;         posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;     }     o.style.position = "absolute";  //定義當前對象為絕對定位     o.style.top = (posY + y) + "px";  //用鼠標指針的y軸坐標和傳入偏移值設置對象y軸坐標     o.style.left = (posX + x) + "px";  //用鼠標指針的x軸坐標和傳入偏移值設置對象x軸坐標 }
      var pos = function (o, x, y, event) {  //鼠標定位賦值函數(shù)     var posX = 0, posY = 0;  //臨時變量值     var e = event || window.event;  //標準化事件對象     if (e.pageX || e.pageY) {  //獲取鼠標指針的當前坐標值         posX = e.pageX;         posY = e.pageY;     } else if (e.clientX || e.clientY) {         posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;         posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;     }     o.style.position = "absolute";  //定義當前對象為絕對定位     o.style.top = (posY + y) + "px";  //用鼠標指針的y軸坐標和傳入偏移值設置對象y軸坐標     o.style.left = (posX + x) + "px";  //用鼠標指針的x軸坐標和傳入偏移值設置對象x軸坐標 }

      下面測試封裝代碼。為 document 對象注冊鼠標移動事件處理函數(shù),并傳入鼠標定位封裝函數(shù),傳入的對象為 <div> 元素,設置其位置向鼠標指針右下方偏移(10,20)的距離??紤]到 DOM 事件模型通過參數(shù)形式傳遞事件對象,所以不要忘記在調(diào)用函數(shù)中還要傳遞事件對象。

      復制純文本復制
      <div id="div1">鼠標追隨</div> <script>     var div1 = document.getElementById("div1");     document.onmousemove = function (event) {         pos (div1, 10, 20, event);     } </script>
      <div id="div1">鼠標追隨</div> <script>     var div1 = document.getElementById("div1");     document.onmousemove = function (event) {         pos (div1, 10, 20, event);     } </script>

      示例3

      獲取鼠標指針在元素內(nèi)的坐標。使用 offsetX 和 offsetY 屬性可以實現(xiàn)這樣的目標,但是 Mozilla 瀏覽器不支持??梢赃x用 layerX 和 layerY 屬性來兼容 Mozilla 瀏覽器。

      設計代碼如下:

      復制純文本復制
      var event = event || window.event; if (event.offsetX || event.offsetY) {  //適用非Mozilla瀏覽器     x = event.offsetX;     y = event.offsetY; } else if (event.layerX || event.layerY) {  //兼容Mozilla瀏覽器     x = event.layerX;     y = event.layerY; }
      var event = event || window.event; if (event.offsetX || event.offsetY) {  //適用非Mozilla瀏覽器     x = event.offsetX;     y = event.offsetY; } else if (event.layerX || event.layerY) {  //兼容Mozilla瀏覽器     x = event.layerX;     y = event.layerY; }

      但是,layerX 和 layerY 屬性是以絕對定位的父元素為參照物,而不是元素自身。如果沒有絕對定位的父元素,則會以 document 對象為參照物。為此,可以通過腳本動態(tài)添加或者手動添加的方式,設計在元素的外層包圍一個絕對定位的父元素,這樣可以解決瀏覽器兼容問題。考慮到元素之間的距離所造成的誤差,可以適當減去 1 個或幾個像素的偏移量。

      完整設計代碼如下:

      復制純文本復制
      <input type="text" id="text" /> <span style="position:absolute;">     <div id="div1" style="width:200px;height:160px;border:solid 1px red;">鼠標跟隨</div> </span> <script>     var t = document.getElementById("text");     var div1 = document.getElementById("div1");     div1.onmousemove = function (event) {         var event = event || window.event;  //標準化事件對象         if (event.offsetX || event.offsetY) {             t.value = event.offsetX + "" + event.offsetY;         } else if (event.layerX || event.layerY) {             t.value = (event.layerX-1) + "" + (event.layerY-1);         }     } </script>
      <input type="text" id="text" /> <span style="position:absolute;">     <div id="div1" style="width:200px;height:160px;border:solid 1px red;">鼠標跟隨</div> </span> <script>     var t = document.getElementById("text");     var div1 = document.getElementById("div1");     div1.onmousemove = function (event) {         var event = event || window.event;  //標準化事件對象         if (event.offsetX || event.offsetY) {             t.value = event.offsetX + "" + event.offsetY;         } else if (event.layerX || event.layerY) {             t.value = (event.layerX-1) + "" + (event.layerY-1);         }     } </script>

      這種做法能夠解決在元素內(nèi)部定位鼠標指針的問題。但是,由于在元素外面包裹了一個絕對定位的元素,會破壞整個頁面的結(jié)構布局。在確保這種人為方式不會導致結(jié)構布局混亂的前提下,可以考慮選用這種方法。

      【推薦學習:javascript高級教程】

      贊(0)
      分享到: 更多 (0)
      網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號