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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

您可能感興趣的文章: