偶然看到這個頁面瀏覽量顯示的東東，很有意思，自己做了一個。

代碼如下：html>

頁面瀏覽量頂部橫條顯示

$(function(){

$(window).scroll(function()?{

var?yH?=?$(document).height();?//BODY高

var?sH?=?$(window).height();???//窗口高

var?yW?=?$(document).width();??//文檔寬

var?st?=?$(this).scrollTop();??//被卷高

var?nows?=?st/(yH-sH)*yW????????//yW*st/(yH-sH)????//??x/yW?=?st/(yH-sH)

$(".toper").css({width:nows});

})

})

body,html,div?{margin:0px;padding:0px;}

.box{width:100%;height:2000px;background:red;}

.toper{width:0px;height:4px;background:blue;position:fixed;top:0px;}

.info{margin:0?auto;position:fixed;top:100px;text-align:center;width:100%;}

頁面瀏覽量頂部橫條顯示

測試頁面

qoogle.cn?提供

知識補充(網上一通復制、粘貼)：

在jquery中可以使用下面的方法

獲取瀏覽器顯示區域的高度 ： $(window).height();

獲取瀏覽器顯示區域的寬度 ：$(window).width();

獲取頁面的文檔高度 ：$(document).height();

獲取頁面的文檔寬度 ：$(document).width();

獲取滾動條到頂部的垂直高度 ：$(document).scrollTop();

獲取滾動條到左邊的垂直寬度 ：$(document).scrollLeft();

使用javascript也是可以得到這些信息的

網頁可見區域寬： document.body.clientWidth

網頁可見區域高： document.body.clientHeight

網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)

網頁可見區域高： document.body.offsetHeight (包括邊線的高)

網頁正文全文寬： document.body.scrollWidth

網頁正文全文高： document.body.scrollHeight

網頁被卷去的高： document.body.scrollTop

網頁被卷去的左： document.body.scrollLeft

網頁正文部分上： window.screenTop

網頁正文部分左： window.screenLeft

屏幕分辨率的高： window.screen.height

屏幕分辨率的寬： window.screen.width

屏幕可用工作區高度： window.screen.availHeight

屏幕可用工作區寬度： window.screen.availWidth

獲取瀏覽器窗口的可視區域高度和寬度,滾動條高度：1?document.body.clientWidth?==>?BODY對象寬度

2?document.body.clientHeight?==>?BODY對象高度

3?document.documentElement.clientWidth?==>?可見區域寬度

4?document.documentElement.clientHeight?==>?可見區域高度

5

6?document.body.clientWidth?==>?網頁可見區域寬

7?document.body.clientHeight?==>?網頁可見區域高

8?document.body.offsetWidth?==>?網頁可見區域寬(包括邊線的寬)

9?document.body.offsetHeight?==>?網頁可見區域高(包括邊線的高)

10?document.body.scrollWidth?==>?網頁正文全文寬document.body.scrollHeight?==>?網頁正文全文高

11?document.body.scrollTop?==>?網頁被卷去的高

12?document.body.scrollLeft?==>?網頁被卷去的左

13?window.screenTop?==>?網頁正文部分上

14?window.screenLeft?==>?網頁正文部分左

15?window.screen.height?==>?屏幕分辨率的高

16?window.screen.width?==>?屏幕可用工作區高度

17?window.screen.availHeight?==>?屏幕可用工作區高度

18?window.screen.availWidth?==>?屏幕可用工作區寬度

部分jquery函數獲取方法：1?//?部分jQuery函數

2?$(window).height()?　??????????????//瀏覽器時下窗口可視區域高度

3?$(document).height()　???????????//瀏覽器時下窗口文檔的高度

4?$(document.body).height()　　　　　　//瀏覽器時下窗口文檔body的高度

5?$(document.body).outerHeight(true)　//瀏覽器時下窗口文檔body的總高度?包括border?padding?margin

6?$(window).width()?　???//瀏覽器時下窗口可視區域寬度

7?$(document).width()???//瀏覽器時下窗口文檔對于象寬度

8?$(document.body).width()　　　　　　//瀏覽器時下窗口文檔body的高度

9?$(document.body).outerWidth(true)　//瀏覽器時下窗口文檔body的總寬度?包括border?padding1?HTML精確定位:??scrollLeft,scrollWidth,clientWidth,offsetWidth

2?scrollHeight:?獲取對象的滾動高度。

3?scrollLeft:?設置或獲取位于對象左邊界和窗口中目前可見內容的最左端之間的距離

4?scrollTop:??設置或獲取位于對象最頂端和窗口中可見內容的最頂端之間的距離

5?scrollWidth:?獲取對象的滾動寬度

6?offsetHeight:獲取對象相對于版面或由父坐標?offsetParent?屬性指定的父坐標的高度

7?offsetLeft:?獲取對象相對于版面或由?offsetParent?屬性指定的父坐標的計算左側位置

8?offsetTop:??獲取對象相對于版面或由?offsetTop?屬性指定的父坐標的計算頂端位置

9?event.clientX?相對文檔的水平座標

10?event.clientY?相對文檔的垂直座標

11?event.offsetX?相對容器的水平坐標

12?event.offsetY?相對容器的垂直坐標

13?document.documentElement.scrollTop?垂直方向滾動的值

14?event.clientX+document.documentElement.scrollTop?相對文檔的水平座標+垂直方向滾動的量

結合各上圖介紹一下各個屬性的作用：

一.offsetTop屬性:

此屬性可以獲取元素的上外緣距離最近采用定位父元素內壁的距離，如果父元素中沒有采用定位的，則是獲取上外邊緣距離文檔內壁的距離。所謂的定位就是position屬性值為relative、absolute或者fixed。

返回值是一個整數，單位是像素。

此屬性是只讀的。

二.offsetLeft屬性:

此屬性和offsetTop的原理是一樣的，只不過方位不同，這里就不多介紹了。

三.offsetWidth屬性:

此屬性可以獲取元素的寬度，寬度值包括:元素內容+內邊距+邊框。不包括外邊距和滾動條部分。

返回值是一個整數，單位是像素。

此屬性是只讀的。

四.offsetHeight屬性:

此屬性可以獲取元素的高度，寬度值包括:元素內容+內邊距+邊框。不包括外邊距和滾動條部分。

返回值是一個整數，單位是像素。

此屬性是只讀的。

五.clientWidth屬性:

此屬性可以返回一個元素的寬度值，值是:元素的內容+內邊距。不包括邊框、外邊距和滾動條部分。

返回值是一個整數，單位是像素。

此屬性是只讀的。

六.clientHeight屬性:

此屬性可以返回一個元素的高度值，值是:元素的內容+內邊距。不包括邊框、外邊距和滾動條部分。

返回值是一個整數，單位是像素。

此屬性是只讀的。

七.scrollLeft屬性:

此屬性可以獲取或者設置對象的最左邊到對象在當前窗口顯示的范圍內的左邊的距離，也就是元素被滾動條向左拉動的距離。

返回值是一個整數，單位是像素。

此屬性是可讀寫的。

八.scrollTop屬性:

此屬性可以獲取或者設置對象的最頂部到對象在當前窗口顯示的范圍內的頂邊的距離，也就是元素滾動條被向下拉動的距離。

返回值是一個整數，單位是像素。

此屬性是可讀寫的。

九.scrollHeight屬性:

此屬性獲取對象的實際尺寸。

總結

以上是生活随笔為你收集整理的html如何制作查看更多横条,页面浏览量顶部横条显示代码－附“Js/Jquery获取网页屏幕可见区域高度”...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。