页面浏览量顶部横条显示代码-附“Js/Jquery获取网页屏幕可见区域高度”

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

代码如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width">
<title>页面浏览量顶部横条显示</title>
<link rel="stylesheet" type="text/css" href="http://#" />         <!--可引用外部css-->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js" ></script>          <!--可引用外部JS,以及jquery等库-->
<!-- 各种JS库的引用地址:www.bootcdn.cn -->
<script>
$(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});
    })
})
</script>
<style>
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%;}
</style>
</head>
<body>
	<div class="box">
		<div class="toper"></div>
		<div class="info"><h1>页面浏览量顶部横条显示</h1><a href="http://www.zouni.run" target="_blank">  测试页面</a><p>qoogle.cn 提供</p></div>
	</div>
</body>
</html>

可在www.zouni.run快速测试。


知识补充(网上一通复制、粘贴):


scroll值.gif


  在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 padding
 1 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属性:

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


如果文章对您有帮助|有启发|有共鸣|有“爽了”,请随意打赏。您的支持是我的动力和价值的体现。

----------我不是街头卖艺者,但我渴望被打赏,博客要生存下去不容易。
----------我不是酒店服务生,但我渴望被打赏,博主也有妻儿子女一家子人。
----------我不是乞丐叫花子,但我渴望被打赏,渴望被打赏的价值认同感。
----------我不是建筑搬运工,但我渴望被打赏,我是蜜蜂我阅读/挑选/整合/转载/传播。
----------我不是作家或教授,但我渴望被打赏,咱中国人也能主动为知识/为受益而付费。

感谢土豪的打赏!


一码支持:微信/支付宝

打赏qoogle的二维码


分享,也是您对我的热力支持。谢谢!

内容版权声明:除转载分类下的文章来源网络(直转或整合而成),其它皆为本站原创文章。

转载注明出处:http://qoogle.cn/?id=67

发表评论(不用注册哟!)

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。