一个实用的js window封装类

原文出处:http://www.cnblogs.com/carekee/articles/2569346.html

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

1.获取屏幕宽度的函数

2.获取屏幕高度的函数

3.获取滚动条横向宽度

4.获取滚动条竖向高度

5.window.onscroll绑定事件

6.删除window.onscroll绑定事件

7.window.onload绑定事件

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

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

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

if(!coos)var coos = function(){};   
if(!coos.browser)   
{   
    coos.userAgent = navigator.userAgent.toLowerCase();   
    coos.browser = {   
        version: (coos.userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,'0'])[1],   
        safari: /webkit/.test(coos.userAgent),   
        opera: /opera/.test(coos.userAgent),   
        msie: /msie/.test(coos.userAgent) && !/opera/.test(coos.userAgent),   
        mozilla: /mozilla/.test(coos.userAgent) && !/(compatible|webkit)/.test(coos.userAgent)   
    };   
}   
coos.window = function(){};   
coos.window.winWidth  = 0;   
coos.window.winHeight = 0;   
  
/**  
 * 获取屏幕宽度的函数，在非xhtml标准页面下有可能有问题  
 */  
coos.window.width = function()   
{   
    if (window.innerWidth)//for Firefox   
    {   
        coos.window.winWidth = window.innerWidth;   
    }   
    else if((document.body) && (document.body.clientWidth))   
    {   
        coos.window.winWidth = document.body.clientWidth;   
    }   
  
    if (document.documentElement && document.documentElement.clientWidth)   
    {   
        coos.window.winWidth = document.documentElement.clientWidth;   
    }   
    return coos.window.winWidth;   
};   
  
/**  
 * 获取屏幕高度的函数  
 * html,body高度属性必须设值为height:100%否则在火狐浏览器下获取不到真实高度  
 */  
coos.window.height = function()   
{   
    if (window.innerHeight)//for Firefox   
    {   
        coos.window.winHeight = window.innerHeight;   
    }   
    else if((document.body) && (document.body.clientHeight))   
    {   
        coos.window.winHeight = document.body.clientHeight;   
    }   
  
    if (document.documentElement  && document.documentElement.clientHeight)   
    {   
        coos.window.winHeight = document.documentElement.clientHeight;   
    }   
    return coos.window.winHeight;   
};   
  
/**  
 * 获取滚动条横向宽度  
 */  
coos.window.scrollWidth = function()   
{   
    return document.body.scrollWidth + "px";   
};   
  
/**  
 * 获取滚动条竖向高度，取body.scrollHeight和documentElement.scrollHeight中最高的一个  
 */  
coos.window.scrollHeight = function()   
{   
    return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight) + "px";   
};   
  
coos.window.onscroll = function(){};   
  
/**  
 * window.onscroll绑定事件  
 * @param fn 需要绑定的function  
 */  
coos.window.onscroll.add = function(fn)   
{   
    if (window.addEventListener)    
    {   
        window.addEventListener("scroll",fn,false);   
    }   
    else  
    {   
        window.attachEvent("onscroll", fn);   
    }   
};   
  
/**  
 * 删除window.onscroll绑定事件  
 * @param fn 需要绑定的function  
 */  
coos.window.onscroll.remove = function(fn)   
{   
    if (window.removeEventListener)    
    {   
        window.addEventListener("scroll",fn,false);   
    }   
    else  
    {   
        window.detachEvent("onscroll", fn);   
    }   
};   
  
/**  
 * window.onload绑定事件  
 * @param fn 需要绑定的function  
 */  
coos.window.onload = function(fn)   
{   
    if (window.addEventListener)    
    {   
        window.addEventListener("load",fn,false);   
    }   
    else  
    {   
        window.attachEvent("onload", fn);   
    }   
};   
  
/**  
 * 让元素显示在屏幕中间,元素必须是绝对定位的  
 * @param obj 要显示的对象,改变top left 属性值  
 * @param event 触发的事件，在有滚动条的情况下必须传入事件以获取当时所在的滚动条高度  
 * @example  
<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)" οnclick="show(event)">show div center</a>  
    </div>  
 */  
coos.window.center = function(obj,event)   
{   
    var e = event || window.event;   
    if(e)   
    {   
        obj.style.left = ((coos.window.width() - parseInt(obj.style.width,10))/2).toFixed() + "px";   
        var objh = (parseInt(obj.style.height,10)/2).toFixed();   
        var sh = parseInt(Math.max(document.body.scrollTop,document.documentElement.scrollTop),10);   
        var wh = parseInt((coos.window.height()/2).toFixed(),10);   
        var ch = sh + wh;   
        obj.style.top  = (ch - objh) + "px";   
    }   
    else  
    {   
        obj.style.left = ((coos.window.width() - parseInt(obj.style.width,10))/2).toFixed() + "px";   
        obj.style.top  = ((coos.window.height() - parseInt(obj.style.height,10))/2).toFixed() + "px";   
    }   
};   
  
/**  
 * 获取屏幕中间显示距离顶部的高度  
 */  
coos.window.center.top = function(obj)   
{   
    return ((coos.window.height() - parseInt(obj.style.height,10))/2).toFixed();   
};   
  
/**  
 * 固顶元素在屏幕中显示，不随滚动条的变化而变化  
 */  
coos.window.fixed = function()   
{   
    coos.window.onscroll.add(coos.window.fixed.bind);   
};   
  
/**  
 * 绑定需要固顶高度的元素window.onscroll事件  
 */  
coos.window.fixed.bind = function()   
{   
    if(!coos.window.fixed.obj || !coos.window.fixed.top)   
    {   
        return;   
    }   
    var objs = coos.window.fixed.obj;   
    var tops = coos.window.fixed.top;   
    var len = objs.length;   
    //ie6.0以下不支持position:fixed;属性   
    if(coos.browser.msie && parseInt(coos.browser.version) <= 6)   
    {   
        for(var i = 0; i < len;i++)   
        {   
            var sh = parseInt(Math.max(document.body.scrollTop,document.documentElement.scrollTop),10);   
            objs[i].style.top = (sh + tops[i]) + "px";   
        }   
    }   
    else  
    {   
        for(var i = 0; i < len;i++)   
        {   
            objs[i].style.position = "fixed";   
            objs[i].style.top = tops[i] + "px";   
        }   
        //设置完position:fixed;属性和top属性后移除onscroll事件   
        coos.window.onscroll.remove(coos.window.fixed.bind);   
    }   
};   
  
/**  
 * 设置需要固定高度的元素  
 * @param obj 需要固定高度的元素对象  
 * @param top 需要固定高度的元素距离顶部的高度  
 */  
coos.window.fixed.set = function(obj,top)   
{   
    if(!coos.window.fixed.obj)   
    {   
        coos.window.fixed.obj = new Array();   
    }   
    coos.window.fixed.obj.push(obj);   
       
    if(!coos.window.fixed.top)   
    {   
        coos.window.fixed.top = new Array();   
    }   
    top = parseInt(top,10);   
    coos.window.fixed.top.push(top);   
};  

<!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)" οnclick="show(event)">show div center</a>  
    </div>  
</body>     
</html>