html如何制作查看更多横条,页面浏览量顶部横条显示代码－附“Js/Jquery获取网页屏幕可见区域高度”...

偶然看到这个页面浏览量显示的东东，很有意思，自己做了一个。

代码如下：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属性:

此属性获取对象的实际尺寸。