|
|
復(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í)到這了，有什么問題歡迎留言討論。
JavaScript技術(shù)：javascript與CSS復(fù)習(xí)(三)，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
