tbwshc

          通過 JavaScript 獲取頁面上的鼠標(biāo)位置

          用 JS 計算鼠標(biāo)在頁面上的位置并非難事, 只要把握好各瀏覽器的區(qū)別就可以輕易算出鼠標(biāo)位置. (這是 DEMO)

          視窗 (瀏覽器可視窗口) 就像是頁面上的掩板開了一個洞. 滾動條可以改變頁面和視窗之間的偏移量, 從而可以通過視窗看到頁面的各個位置.
          鼠標(biāo)在頁面上的位置 = 頁面和視窗之間的偏移量 + 鼠標(biāo)在視窗中的位置

          圖中的 cursorX 和 cursorY 分別是鼠標(biāo)在視窗中的橫向和縱向位置, scrollY 是tb頁面和視窗之間的縱向距離. 當(dāng)然, 當(dāng)視窗寬度小于頁面寬度的時候, 還會存在 scrollX. 那么鼠標(biāo)在頁面上的位置就是: (scrollX+cursorX, scrollY+cursorY)

          IE 以外的瀏覽器 (本人測試過 Firefox 3.6, Opera 10.10, Chrome 4.1 和 Safari 4.0.4) 均可以通過 pageXOffset 和 pageYOffset 來獲取頁面和視窗間的橫縱距離. 但 IE (本人測試過 IE6, IE7, IE8) 只能通過滾動位移來獲取頁面和視窗間的距離, 并存在一到兩個像素的偏離.

          以下是獲取鼠標(biāo)在頁面上位置的代碼實現(xiàn). (這是 DEMO)

          /**
           * 獲取鼠標(biāo)在頁面上的位置
           * @param ev		觸發(fā)的事件
           * @return			x:鼠標(biāo)在頁面上的橫向位置, y:鼠標(biāo)在頁面上的縱向位置
           */
          function getMousePoint(ev) {
          	// 定義鼠標(biāo)在視窗中的位置
          	var point = {
          		x:0,
          		y:0
          	};
           
          	// 如果瀏覽器支持 pageYOffset, 通過 pageXOffset 和 pageYOffset 獲取頁面和視窗之間的距離
          	if(typeof window.pageYOffset != 'undefined') {
          		point.x = window.pageXOffset;
          		point.y = window.pageYOffset;
          	}
          	// 如果瀏覽器支持 compatMode, 并且指定了 DOCTYPE, 通過 documentElement 獲取滾動距離作為頁面和視窗間的距離
          	// IE 中, 當(dāng)頁面指定 DOCTYPE, compatMode 的值是 CSS1Compat, 否則 compatMode 的值是 BackCompat
          	else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
          		point.x = document.documentElement.scrollLeft;
          		point.y = document.documentElement.scrollTop;
          	}
          	// 如果瀏覽器支持 document.body, 可以通過 document.body 來獲取滾動高度
          	else if(typeof document.body != 'undefined') {
          		point.x = document.body.scrollLeft;
          		point.y = document.body.scrollTop;
          	}
           
          	// 加上鼠標(biāo)在視窗中的位置
          	point.x += ev.clientX;
          	point.y += ev.clientY;
           
          	// 返回鼠標(biāo)在視窗中的位置
          	return point;
          }

          記得以前我寫過一個減速滾動置頂?shù)?JavaScript 方法, 也是通過計算視窗和頁面高度來實現(xiàn)的, 其計算方法與本文的方法不同小異, 也可以搬過來用.

          這幾個月來, 專注前端項目的開發(fā), 也算小有收獲, 最近我會將一些積累作成文章分享于眾. 以此作為鋪墊, 由淺入深, 希望可以帶出一些有用的內(nèi)容.

          posted on 2012-07-04 13:15 chen11-1 閱讀(185) 評論(0)  編輯  收藏


          只有注冊用戶登錄后才能發(fā)表評論。


          網(wǎng)站導(dǎo)航:
           

          My Links

          Blog Stats

          常用鏈接

          留言簿(4)

          隨筆分類

          隨筆檔案

          文章分類

          文章檔案

          新聞檔案

          tbw淘寶商城-首頁

          搜索

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 佳木斯市| 长白| 阜康市| 翁源县| 鸡泽县| 揭西县| 和田县| 达拉特旗| 新巴尔虎左旗| 雷山县| 甘洛县| 盐源县| 仪陇县| 胶州市| 祁门县| 兰坪| 白水县| 惠来县| 嘉兴市| 迁安市| 九龙县| 余江县| 乐都县| 农安县| 弥勒县| 隆化县| 潍坊市| 白银市| 卢龙县| 凤台县| 奉节县| 八宿县| 泽库县| 阜平县| 濉溪县| 潜山县| 泰兴市| 绩溪县| 宿州市| 突泉县| 天津市|