javascript與CSS複習(三)

我們先來看看如何擷取游標相對於整個頁面的位置，因為游標位置變數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的strict 模式中
var de = document.documentElement;
//如果瀏覽器存在pageXOffset屬性,則使用它
return self.pageXOffset ||
//否則，嘗試擷取根節點的左端滾動位移量
(de && de.scrollLeft) ||
//最後，嘗試擷取body元素的左端滾動位移量
document.body.scrollLeft;
}

//確定瀏覽器垂直滾動位置的函數
function scrollY() {
//一個捷徑，用在IE6/7的strict 模式中
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的strict 模式中
var de = document.documentElement;
//如果瀏覽器存在innerHeight屬性,則使用它
return self.innerHeight ||
//否則,嘗試擷取根節點高度
(de && de.clientHeight) ||
//最後,嘗試擷取body元素的高度
document.body.clientHeight;
}

//擷取視口的寬度
function windowWidth() {
//一個捷徑,用在IE6/7的strict 模式中
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的複習到這了，有什麼問題歡迎留言討論。