快捷導(dǎo)航

javascript與CSS復(fù)習(xí)(三)

更新時間：2010年06月29日 02:03:11 作者：

呵呵，又弄成了三部曲，這是最后一部分，關(guān)于鼠標(biāo)和瀏覽器本身顯示上的一些屬性。

我們先來看看如何獲取光標(biāo)相對于整個頁面的位置，因?yàn)楣鈽?biāo)位置變量x，y一般通過鼠標(biāo)事件獲取(如mousemove或者mousedown)，下面兩個通用函數(shù)，用于獲取光標(biāo)相對于整個頁面的當(dāng)前位置。

復(fù)制代碼代碼如下:

//獲取光標(biāo)的水平位置 
function getX(e) { 
//通用化事件對象 
e = e || window.event; 
//先檢查非IE瀏覽器的位置,在檢查IE的位置 
return e.pageX || e.clientX + document.body.scrollLeft; 
} 

//獲取光標(biāo)的垂直位置 
function getY(e) { 
//通用化事件對象 
e = e || window.event; 
//先檢查非IE瀏覽器的位置,在檢查IE的位置 
return e.pageY || e.clientY + document.body.scrollTop; 
} 

像在FF中e.pageX就是在整個頁面中的X坐標(biāo)(包括滾動條的滾動距離), 而在IE中e.clientX表示當(dāng)前顯示在用戶面前視圖中的X坐標(biāo)，還要加上document.body.scrollLeft(橫向滾動條的距離)才是完整的X坐標(biāo)位置。
下面的一個概念是視口(viewport)，可以看作是瀏覽器滾動條內(nèi)的一切東西。視口還包含的部分組件是視口窗口、頁面和滾動條等。
獲得頁面的尺寸:

復(fù)制代碼代碼如下:

//返回頁面的高度(增加內(nèi)容的時候可能會改變) 
function pageHeight() { 
return document.body.scrollHeight; 
} 
//返回頁面的寬度 
function pageWidth() { 
return document.body.scrollWidht; 
} 

其中的scrollHeight和scrollWidth(點(diǎn)擊查閱),它們詳細(xì)描述了元素的潛在寬度和高度，而不只是當(dāng)前所看到的尺寸。
接下來我們要去獲取滾動條的位置，換言之頁面相對于視口的頂端距離。

復(fù)制代碼代碼如下:

//確定瀏覽器水平滾動位置的函數(shù) 
function scrollX() { 
//一個快捷方式，用在IE6/7的嚴(yán)格模式中 
var de = document.documentElement; 
//如果瀏覽器存在pageXOffset屬性,則使用它 
return self.pageXOffset || 
//否則，嘗試獲取根節(jié)點(diǎn)的左端滾動偏移量 
(de && de.scrollLeft) || 
//最后，嘗試獲取body元素的左端滾動偏移量 
document.body.scrollLeft; 
} 

//確定瀏覽器垂直滾動位置的函數(shù) 
function scrollY() { 
//一個快捷方式，用在IE6/7的嚴(yán)格模式中 
var de = document.documentElement; 
//如果瀏覽器存在pageYOffset屬性，則使用它 
return self.pageYOffset || 
//否則，嘗試獲取根節(jié)點(diǎn)的頂端滾動偏移量 
(de && de.scrollTop) || 
//最后，嘗試獲取body元素的頂端滾動偏移量 
document.body.scrollTop; 
} 

下面我們來看看如何移動滾動條，我們可以用scrollTo方法，它作為window對象的一個屬性而存在，它帶有兩個參數(shù)，即x和y偏移量，可以滾動到視口指定位置，兩個例子

復(fù)制代碼代碼如下:

//如果需要滾動到瀏覽器的頂端，可以這么做 
window.scrollTo(0,0) 

//如果需要滾動到指定元素，則可以這樣 
window.scrollTo(0, pageY(document.getElementById('content'))); 

如果對pageY函數(shù)不熟悉了，可以往回復(fù)習(xí)下，用來獲得元素在整個文檔中的位置，再給出一遍，讓自己也鞏固下

復(fù)制代碼代碼如下:

//獲取元素的Y位置 
function pageY(elem) { 
//查看我們是否位于根元素 
return elem.offsetParent ? 
//如果我們能繼續(xù)得到上一個元素，增加當(dāng)前的偏移量并繼續(xù)往上遞歸 
elem.offsetTop + pageY(elem.offsetParent): 
//否則，獲取當(dāng)前的偏移量 
elem.offsetTop; 
} 

我們下面來學(xué)習(xí)如何獲得視口(viewport)的尺寸，獲取視口的尺寸就可以深入了解用戶當(dāng)前可以看到的內(nèi)容有多少。

復(fù)制代碼代碼如下:

//獲取視口的高度 
function windowHeight() { 
//一個快捷方式,用在IE6/7的嚴(yán)格模式中 
var de = document.documentElement; 
//如果瀏覽器存在innerHeight屬性,則使用它 
return self.innerHeight || 
//否則,嘗試獲取根節(jié)點(diǎn)高度 
(de && de.clientHeight) || 
//最后,嘗試獲取body元素的高度 
document.body.clientHeight; 
} 

//獲取視口的寬度 
function windowWidth() { 
//一個快捷方式,用在IE6/7的嚴(yán)格模式中 
var de = document.documentElement; 
//如果瀏覽器存在innerWidth屬性,則使用它 
return self.innerWidth || 
//否則,嘗試獲取根節(jié)點(diǎn)寬度 
(de && de.clientWidth) || 
//最后,嘗試獲取body元素的寬度 
document.body.clientWidth; 
} 

可能你會對innerHeight,clientHeight等屬性有些疑惑,那就直接點(diǎn)擊它,Mozilla Developer center里解釋的很清楚。

最后來講一個比較有意思的效果，現(xiàn)在web前端中也很流行——"拖拽"，作者沒有給出具體的實(shí)現(xiàn)，而是引用了一個不錯的js庫，dom-drag.js,可以學(xué)習(xí)下高手的源碼，同時介紹了好幾個流行的js庫,jquery也在其中。好了javascript與css的復(fù)習(xí)到這了，有什么問題歡迎留言討論。

您可能感興趣的文章: