文档章节

一个实用的js window封装类

黄献
 黄献
发布于 2012/11/04 21:35
字数 1302
阅读 24
收藏 1

发布一个实用的js window封装类,主要内容包括:

1.获取屏幕宽度的函数

2.获取屏幕高度的函数

3.获取滚动条横向宽度

4.获取滚动条竖向高度

5.window.onscroll绑定事件

6.删除window.onscroll绑定事件

7.window.onload绑定事件

8.让元素显示在屏幕中间

9.获取屏幕中间显示距离顶部的高度

10.固顶元素在屏幕中显示,不随滚动条的变化而变化

1.if(!coos)var coos = function(){};   
2.if(!coos.browser)   3.{   
4.    coos.userAgent = navigator.userAgent.toLowerCase();   
5.    coos.browser = {   
6.        version: (coos.userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,'0'])[1],   7.        safari: /webkit/.test(coos.userAgent),   
8.        opera: /opera/.test(coos.userAgent),   
9.        msie: /msie/.test(coos.userAgent) && !/opera/.test(coos.userAgent),   
10.        mozilla: /mozilla/.test(coos.userAgent) && !/(compatible|webkit)/.test(coos.userAgent)   
11.    };   
12.}   
13.coos.window = function(){};   14.coos.window.winWidth  = 0;   
15.coos.window.winHeight = 0;   
16.  
17./**  18. * 获取屏幕宽度的函数,在非xhtml标准页面下有可能有问题  
19. */  
20.coos.window.width = function()   21.{   
22.    if (window.innerWidth)//for Firefox   23.    {   
24.        coos.window.winWidth = window.innerWidth;   
25.    }   
26.    else if((document.body) && (document.body.clientWidth))   27.    {   
28.        coos.window.winWidth = document.body.clientWidth;   
29.    }   
30.  
31.    if (document.documentElement && document.documentElement.clientWidth)   32.    {   
33.        coos.window.winWidth = document.documentElement.clientWidth;   
34.    }   
35.    return coos.window.winWidth;   36.};   
37.  
38./**  39. * 获取屏幕高度的函数  
40. * html,body高度属性必须设值为height:100%否则在火狐浏览器下获取不到真实高度  
41. */  
42.coos.window.height = function()   43.{   
44.    if (window.innerHeight)//for Firefox   45.    {   
46.        coos.window.winHeight = window.innerHeight;   
47.    }   
48.    else if((document.body) && (document.body.clientHeight))   49.    {   
50.        coos.window.winHeight = document.body.clientHeight;   
51.    }   
52.  
53.    if (document.documentElement  && document.documentElement.clientHeight)   54.    {   
55.        coos.window.winHeight = document.documentElement.clientHeight;   
56.    }   
57.    return coos.window.winHeight;   58.};   
59.  
60./**  61. * 获取滚动条横向宽度  
62. */  
63.coos.window.scrollWidth = function()   64.{   
65.    return document.body.scrollWidth + "px";   66.};   
67.  
68./**  69. * 获取滚动条竖向高度,取body.scrollHeight和documentElement.scrollHeight中最高的一个  
70. */  
71.coos.window.scrollHeight = function()   72.{   
73.    return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight) + "px";   74.};   
75.  
76.coos.window.onscroll = function(){};   77.  
78./**  79. * window.onscroll绑定事件  
80. * @param fn 需要绑定的function  
81. */  
82.coos.window.onscroll.add = function(fn)   83.{   
84.    if (window.addEventListener)    85.    {   
86.        window.addEventListener("scroll",fn,false);   87.    }   
88.    else  89.    {   
90.        window.attachEvent("onscroll", fn);   91.    }   
92.};   
93.  
94./**  95. * 删除window.onscroll绑定事件  
96. * @param fn 需要绑定的function  
97. */  
98.coos.window.onscroll.remove = function(fn)   99.{   
100.    if (window.removeEventListener)    101.    {   
102.        window.addEventListener("scroll",fn,false);   103.    }   
104.    else  105.    {   
106.        window.detachEvent("onscroll", fn);   107.    }   
108.};   
109.  
110./**  111. * window.onload绑定事件  
112. * @param fn 需要绑定的function  
113. */  
114.coos.window.onload = function(fn)   115.{   
116.    if (window.addEventListener)    117.    {   
118.        window.addEventListener("load",fn,false);   119.    }   
120.    else  121.    {   
122.        window.attachEvent("onload", fn);   123.    }   
124.};   
125.  
126./**  127. * 让元素显示在屏幕中间,元素必须是绝对定位的  
128. * @param obj 要显示的对象,改变top left 属性值  
129. * @param event 触发的事件,在有滚动条的情况下必须传入事件以获取当时所在的滚动条高度  
130. * @example  
131.<style type="text/css">  
132.        html,body {margin: 0; padding: 0;height:100%;font-size: 14px;}  
133.      </style>  
134.    <script type="text/javascript">    
135.    function show(event)  
136.    {  
137.        var obj = document.getElementById("showDiv");  
138.        coos.window.center(obj,event);  
139.        //元素在屏幕中间距离顶部的高度  
140.        var top = coos.window.center.top(obj);  
141.        //固顶在屏幕上,不随滚动条变化  
142.        coos.window.fixed.set(obj,top);  
143.        coos.window.fixed();  
144.    }  
145.    </script>  
146.    <div id="showDiv" style="position:absolute;left:20px;top:5px;height:20px;width:400px;border:2px solid #ccc;text-align: center;clear: both;">  
147.        I'm a div,I can show and fixed in center!  
148.    </div>  
149.    <div style="clear: both;margin:80px;height:1000px;">  
150.        <br /><br />  
151.        <a href="javascript:void(0)" onclick="show(event)">show div center</a>  
152.    </div>  
153. */  
154.coos.window.center = function(obj,event)   155.{   
156.    var e = event || window.event;   157.    if(e)   158.    {   
159.        obj.style.left = ((coos.window.width() - parseInt(obj.style.width,10))/2).toFixed() + "px";   160.        var objh = (parseInt(obj.style.height,10)/2).toFixed();   161.        var sh = parseInt(Math.max(document.body.scrollTop,document.documentElement.scrollTop),10);   162.        var wh = parseInt((coos.window.height()/2).toFixed(),10);   163.        var ch = sh + wh;   164.        obj.style.top  = (ch - objh) + "px";   165.    }   
166.    else  167.    {   
168.        obj.style.left = ((coos.window.width() - parseInt(obj.style.width,10))/2).toFixed() + "px";   169.        obj.style.top  = ((coos.window.height() - parseInt(obj.style.height,10))/2).toFixed() + "px";   170.    }   
171.};   
172.  
173./**  174. * 获取屏幕中间显示距离顶部的高度  
175. */  
176.coos.window.center.top = function(obj)   177.{   
178.    return ((coos.window.height() - parseInt(obj.style.height,10))/2).toFixed();   179.};   
180.  
181./**  182. * 固顶元素在屏幕中显示,不随滚动条的变化而变化  
183. */  
184.coos.window.fixed = function()   185.{   
186.    coos.window.onscroll.add(coos.window.fixed.bind);   
187.};   
188.  
189./**  190. * 绑定需要固顶高度的元素window.onscroll事件  
191. */  
192.coos.window.fixed.bind = function()   193.{   
194.    if(!coos.window.fixed.obj || !coos.window.fixed.top)   195.    {   
196.        return;   197.    }   
198.    var objs = coos.window.fixed.obj;   199.    var tops = coos.window.fixed.top;   200.    var len = objs.length;   201.    //ie6.0以下不支持position:fixed;属性   202.    if(coos.browser.msie && parseInt(coos.browser.version) <= 6)   203.    {   
204.        for(var i = 0; i < len;i++)   205.        {   
206.            var sh = parseInt(Math.max(document.body.scrollTop,document.documentElement.scrollTop),10);   207.            objs[i].style.top = (sh + tops[i]) + "px";   208.        }   
209.    }   
210.    else  211.    {   
212.        for(var i = 0; i < len;i++)   213.        {   
214.            objs[i].style.position = "fixed";   215.            objs[i].style.top = tops[i] + "px";   216.        }   
217.        //设置完position:fixed;属性和top属性后移除onscroll事件   218.        coos.window.onscroll.remove(coos.window.fixed.bind);   
219.    }   
220.};   
221.  
222./**  223. * 设置需要固定高度的元素  
224. * @param obj 需要固定高度的元素对象  
225. * @param top 需要固定高度的元素距离顶部的高度  
226. */  
227.coos.window.fixed.set = function(obj,top)   228.{   
229.    if(!coos.window.fixed.obj)   230.    {   
231.        coos.window.fixed.obj = new Array();   232.    }   
233.    coos.window.fixed.obj.push(obj);   
234.       
235.    if(!coos.window.fixed.top)   236.    {   
237.        coos.window.fixed.top = new Array();   238.    }   
239.    top = parseInt(top,10);   
240.    coos.window.fixed.top.push(top);   
241.};

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">     
  • <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">     
  • <head>     
  •     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />     
  •     <title>coos.extend.window Build Test Page</title>     
  •     <script type="text/javascript" src="coos.extend.window.js"></script>    
  • </head>     
  •     <body>  
  •     <style type="text/css">  
  •         html,body {margin: 0; padding: 0;height:100%;font-size: 14px;}   
  •       </style>  
  •     <script type="text/javascript">     
  •     function show(event)   
  •     {   
  •         var obj = document.getElementById("showDiv");   
  •         coos.window.center(obj,event);   
  •         //元素在屏幕中间距离顶部的高度   
  •         var top = coos.window.center.top(obj);   
  •         //固顶在屏幕上,不随滚动条变化   
  •         coos.window.fixed.set(obj,top);   
  •         coos.window.fixed();   
  •     }   
  •     </script>  
  •     <div id="showDiv" style="position:absolute;left:20px;top:5px;height:20px;width:400px;border:2px solid #ccc;text-align: center;clear: both;">  
  •         I'm a div,I can show and fixed in center!   
  •     </div>  
  •     <div style="clear: both;margin:80px;height:1000px;">  
  •         <br /><br />  
  •         <a href="javascript:void(0)" onclick="show(event)">show div center</a>  
  •     </div>  
  • </body>     
  • </html>    
  •  

    © 著作权归作者所有

    黄献
    粉丝 0
    博文 17
    码字总数 87682
    作品 0
    杭州
    高级程序员
    私信 提问
    在webview宿主容器中使用HTML5调用本地能力

    这次跟大家分享一下移动应用开发中,在webview宿主容器中使用HTML5调用本地能力需要注意的一些事情。 这里提到的宿主容器是指类似于ExMobi、PhoneGap这样的app框架,宿主容器除了提供基本的H...

    nandy007
    2015/05/12
    1K
    0
    JavaScript Window - 浏览器对象模型

    浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。 浏览器对象模型 (Browser Object Model) 尚无正式标准。由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法...

    一生只为虞美人
    2018/07/12
    0
    0
    javascript引擎在c,c+中调用

    JavaScript是一种广泛用于Web客户端开发的脚本语言,常用来控制浏览器的DOM树,给HTML网页添加动态功能。目前JavaScript遵循的web标准的是ECMAScript262。由于JavaScript提供了丰富的内置函数...

    crossmix
    2015/04/19
    0
    0
    java 私塾课堂笔记——Javascript

    java 私塾课堂笔记——Javascript 1:什么是Javascript JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。 2:Java和Javascript的区别 (1)、基于对象和...

    luodis
    2011/04/27
    486
    0
    关于前端的一个问题,一直迷惑不解

    开源中国很多的jquery插件非常好用,为什么会出现antdesign这些框架,是炫耀技术吗? 1.使用这类框架还要typescript编译,下载一堆工具,像是做后端开发一样,不麻烦吗,页面不就是html,css为...

    myexam123
    2017/05/24
    1K
    16

    没有更多内容

    加载失败,请刷新页面

    加载更多

    nproc systemd on CentOS 7

    Increasing nproc for processes launched by systemd on CentOS 7 Ask Question I have successfully increased the nofile and nproc value for the local users, but I couldn't find a p......

    MtrS
    今天
    3
    0
    了解微信小程序下拉刷新功能

    小程序提供了这个事件。 onPullDownRefresh() 监听用户下拉刷新事件。 如果要开启下拉刷新功能,要先到json配置: "enablePullDownRefresh":true 配置后下拉有反应了但是没有加载效果,在onP...

    oixxan__
    今天
    2
    0
    springmvc java对象转json,上传下载(未完)拦截器Interceptor以及源码解析(未完待续)

    package com.atguigu.my.controller;import java.util.Collection;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Contr......

    architect刘源源
    今天
    30
    0
    [日更-2019.5.24、25、26] Android系统中的Binder通信机制分析(一)--servicemanager

    声明 其实对于Android系统Binder通信的机制早就有分析的想法,记得去年6、7月份Mr.Deng离职期间约定一起对其进行研究的,但因为我个人问题没能实施这个计划,留下些许遗憾... 最近,刚好在做...

    Captain_小馬佩德罗
    昨天
    24
    0
    聊聊dubbo的DataStore

    序 本文主要研究一下dubbo的DataStore DataStore dubbo-2.7.2/dubbo-common/src/main/java/org/apache/dubbo/common/store/DataStore.java @SPI("simple")public interface DataStore { ......

    go4it
    昨天
    3
    0

    没有更多内容

    加载失败,请刷新页面

    加载更多

    返回顶部
    顶部