我們先來看看如何獲取光標相對於整個頁面的位置，因為光標位置變量x，y一般通過鼠標事件獲取(如mousemove或者mousedown)，下面兩個通用函數，用於獲取光標相對於整個頁面的當前位置。
復制代碼 代碼如下://獲取光標的水平位置
function getX(e) {
//通用化事件對象
e = e || window.event;
//先檢查非IE浏覽器的位置,在檢查IE的位置
return e.pageX || e.clientX + document.body.scrollLeft;
}
//獲取光標的垂直位置
function getY(e) {
//通用化事件對象
e = e || window.event;
//先檢查非IE浏覽器的位置,在檢查IE的位置
return e.pageY || e.clientY + document.body.scrollTop;
}
像在FF中e.pageX就是在整個頁面中的X坐標(包括滾動條的滾動距離), 而在IE中e.clientX表示當前顯示在用戶面前視圖中的X坐標，還要加上document.body.scrollLeft(橫向滾動條的距離)才是完整的X坐標位置。
下面的一個概念是視口(viewport)，可以看作是浏覽器滾動條內的一切東西。視口還包含的部分組件是視口窗口、頁面和滾動條等。
獲得頁面的尺寸:
復制代碼 代碼如下://返回頁面的高度(增加內容的時候可能會改變)
function pageHeight() {
return document.body.scrollHeight;
}
//返回頁面的寬度
function pageWidth() {
return document.body.scrollWidht;
}
其中的scrollHeight和scrollWidth(點擊查閱),它們詳細描述了元素的潛在寬度和高度，而不只是當前所看到的尺寸。
接下來我們要去獲取滾動條的位置，換言之頁面相對於視口的頂端距離。
復制代碼 代碼如下://確定浏覽器水平滾動位置的函數
function scrollX() {
//一個快捷方式，用在IE6/7的嚴格模式中
var de = document.documentElement;
//如果浏覽器存在pageXOffset屬性,則使用它
return self.pageXOffset ||
//否則，嘗試獲取根節點的左端滾動偏移量
(de && de.scrollLeft) ||
//最後，嘗試獲取body元素的左端滾動偏移量
document.body.scrollLeft;
}
//確定浏覽器垂直滾動位置的函數
function scrollY() {
//一個快捷方式，用在IE6/7的嚴格模式中
var de = document.documentElement;
//如果浏覽器存在pageYOffset屬性，則使用它
return self.pageYOffset ||
//否則，嘗試獲取根節點的頂端滾動偏移量
(de && de.scrollTop) ||
//最後，嘗試獲取body元素的頂端滾動偏移量
document.body.scrollTop;
}
下面我們來看看如何移動滾動條，我們可以用scrollTo方法，它作為window對象的一個屬性而存在，它帶有兩個參數，即x和y偏移量，可以滾動到視口指定位置，兩個例子
復制代碼 代碼如下://如果需要滾動到浏覽器的頂端，可以這麼做
window.scrollTo(0,0)
//如果需要滾動到指定元素，則可以這樣
window.scrollTo(0, pageY(document.getElementById('content')));
如果對pageY函數不熟悉了，可以往回復習下，用來獲得元素在整個文檔中的位置，再給出一遍，讓自己也鞏固下
復制代碼 代碼如下://獲取元素的Y位置
function pageY(elem) {
//查看我們是否位於根元素
return elem.offsetParent ?
//如果我們能繼續得到上一個元素，增加當前的偏移量並繼續往上遞歸
elem.offsetTop + pageY(elem.offsetParent):
//否則，獲取當前的偏移量
elem.offsetTop;
}
我們下面來學習如何獲得視口(viewport)的尺寸，獲取視口的尺寸就可以深入了解用戶當前可以看到的內容有多少。
復制代碼 代碼如下://獲取視口的高度
function windowHeight() {
//一個快捷方式,用在IE6/7的嚴格模式中
var de = document.documentElement;
//如果浏覽器存在innerHeight屬性,則使用它
return self.innerHeight ||
//否則,嘗試獲取根節點高度
(de && de.clientHeight) ||
//最後,嘗試獲取body元素的高度
document.body.clientHeight;
}
//獲取視口的寬度
function windowWidth() {
//一個快捷方式,用在IE6/7的嚴格模式中
var de = document.documentElement;
//如果浏覽器存在innerWidth屬性,則使用它
return self.innerWidth ||
//否則,嘗試獲取根節點寬度
(de && de.clientWidth) ||
//最後,嘗試獲取body元素的寬度
document.body.clientWidth;
}
可能你會對innerHeight,clientHeight等屬性有些疑惑,那就直接點擊它,Mozilla Developer center裡解釋的很清楚。
最後來講一個比較有意思的效果，現在web前端中也很流行——"拖拽"，作者沒有給出具體的實現，而是引用了一個不錯的js庫，dom-drag.js,可以學習下高手的源碼，同時介紹了好幾個流行的js庫,jquery也在其中。好了javascript與css的復習到這了，有什麼問題歡迎留言討論。