JS和JQUERY獲取頁面大小,滾動(dòng)條位置,元素位置(示例代碼)
js與jquery獲得頁面大小、滾動(dòng)條位置、元素位置
//頁面位置及窗口大小
function GetPageSize() {
var scrW, scrH;
if(window.innerHeight && window.scrollMaxY)
{ // Mozilla
scrW = window.innerWidth + window.scrollMaxX;
scrH = window.innerHeight + window.scrollMaxY;
}
else if(document.body.scrollHeight > document.body.offsetHeight)
{ // all but IE Mac
scrW = document.body.scrollWidth;
scrH = document.body.scrollHeight;
} else if(document.body)
{ // IE Mac
scrW = document.body.offsetWidth;
scrH = document.body.offsetHeight;
}
var winW, winH;
if(window.innerHeight)
{ // all except IE
winW = window.innerWidth;
winH = window.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight)
{ // IE 6 Strict Mode
winW = document.documentElement.clientWidth;
winH = document.documentElement.clientHeight;
} else if (document.body) { // other
winW = document.body.clientWidth;
winH = document.body.clientHeight;
} // for small pages with total size less then the viewport
var pageW = (scrW<winW) ? winW : scrW;
var pageH = (scrH<winH) ? winH : scrH;
return {PageW:pageW, PageH:pageH, WinW:winW, WinH:winH};
};
//滾動(dòng)條位置
function GetPageScroll()
{
var x, y; if(window.pageYOffset)
{ // all except IE
y = window.pageYOffset;
x = window.pageXOffset;
} else if(document.documentElement && document.documentElement.scrollTop)
{ // IE 6 Strict
y = document.documentElement.scrollTop;
x = document.documentElement.scrollLeft;
} else if(document.body) { // all other IE
y = document.body.scrollTop;
x = document.body.scrollLeft;
}
return {X:x, Y:y};
}
jquery
獲取瀏覽器顯示區(qū)域的高度 : $(window).height();
獲取瀏覽器顯示區(qū)域的寬度 :$(window).width();
獲取頁面的文檔高度 :$(document).height();
獲取頁面的文檔寬度 :$(document).width();
獲取滾動(dòng)條到頂部的垂直高度 :$(document).scrollTop();
獲取滾動(dòng)條到左邊的垂直寬度 :$(document).scrollLeft();
計(jì)算元素位置和偏移量
offset方法是一個(gè)很有用的方法,它返回包裝集中第一個(gè)元素的偏移信息。默認(rèn)情況下是相對(duì)body的偏移信息。結(jié)果包含 top和left兩個(gè)屬性。
offset(options, results)
options.relativeTo 指定相對(duì)計(jì) 算偏移位置的祖先元素。這個(gè)元素應(yīng)該是relative或absolute定位。省略則相對(duì)body。
options.scroll 是否把 滾動(dòng)條計(jì)算在內(nèi),默認(rèn)TRUE
options.padding 是否把padding計(jì)算在內(nèi),默認(rèn)false
options.margin 是否把margin計(jì)算在內(nèi),默認(rèn)true
options.border 是否把邊框計(jì)算在內(nèi),默認(rèn)true
- JS實(shí)現(xiàn)判斷滾動(dòng)條滾到頁面底部并執(zhí)行事件的方法
- js監(jiān)聽html頁面的上下滾動(dòng)事件方法
- js,jquery滾動(dòng)/跳轉(zhuǎn)頁面到指定位置的實(shí)現(xiàn)思路
- 當(dāng)滾動(dòng)條滾動(dòng)到頁面底部自動(dòng)加載增加內(nèi)容的js代碼
- js實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到頁面底部繼續(xù)加載
- js判斷滾動(dòng)條是否已到頁面最底部或頂部實(shí)例
- js阻止移動(dòng)端頁面滾動(dòng)的兩種方法
- JS實(shí)現(xiàn)的頁面自定義滾動(dòng)條效果
- js實(shí)現(xiàn)刷新頁面后回到記錄時(shí)滾動(dòng)條的位置【兩種方案可選】
- JavaScript實(shí)現(xiàn)頁面無縫滾動(dòng)效果
相關(guān)文章
jQuery實(shí)現(xiàn)圖片信息的浮動(dòng)顯示實(shí)例代碼
圖片信息的浮動(dòng)顯示的效果,在網(wǎng)頁應(yīng)用中還是比較流行的,下面為大家詳細(xì)介紹下使用jquery是如何實(shí)現(xiàn)的,喜歡的朋友可以參考下2013-08-08
jquery實(shí)現(xiàn)預(yù)覽提交的表單代碼分享
這篇文章主要介紹了jquery實(shí)現(xiàn)預(yù)覽提交的表單代碼,需要的朋友可以參考下2014-05-05
jQuery 2.0.3 源碼分析之core(一)整體架構(gòu)
這篇文章主要介紹了jQuery 2.0.3 源碼分析之core(一)整體架構(gòu),需要的朋友可以參考下2014-05-05
jquery根據(jù)td給相同tr下其他td賦值的實(shí)現(xiàn)方法
下面就為大家?guī)硪黄猨query根據(jù)td給相同tr下其他td賦值的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10

