日期:2014-05-16  浏览次数:20421 次

发布一个实用的js window封装类
发布一个实用的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)" onclick="show(event)">show div center</a>
	</div>
 */
coos.window.center = function(obj,event)
{
	var e = event || window.event;
	if(e)
	{
		ob