`

一个实用的js window封装类

    博客分类：
  • coos
webkitJavaScriptOperaFirefoxIE
阅读更多

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

1.获取屏幕宽度的函数

2.获取屏幕高度的函数

3.获取滚动条横向宽度

4.获取滚动条竖向高度

5.window.onscroll绑定事件

6.删除window.onscroll绑定事件

7.window.onload绑定事件

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

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

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

 

Js代码 复制代码
  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. };  
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)
	{
		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);
};

 

 

Html代码 复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">     
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">     
  3. <head>     
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />     
  5.     <title>coos.extend.window Build Test Page</title>     
  6.     <script type="text/javascript" src="coos.extend.window.js"></script>    
  7. </head>     
  8.     <body>  
  9.     <style type="text/css">  
  10.         html,body {margin: 0; padding: 0;height:100%;font-size: 14px;}   
  11.       </style>  
  12.     <script type="text/javascript">     
  13.     function show(event)   
  14.     {   
  15.         var obj = document.getElementById("showDiv");   
  16.         coos.window.center(obj,event);   
  17.         //元素在屏幕中间距离顶部的高度   
  18.         var top = coos.window.center.top(obj);   
  19.         //固顶在屏幕上,不随滚动条变化   
  20.         coos.window.fixed.set(obj,top);   
  21.         coos.window.fixed();   
  22.     }   
  23.     </script>  
  24.     <div id="showDiv" style="position:absolute;left:20px;top:5px;height:20px;width:400px;border:2px solid #ccc;text-align: center;clear: both;">  
  25.         I'm a div,I can show and fixed in center!   
  26.     </div>  
  27.     <div style="clear: both;margin:80px;height:1000px;">  
  28.         <br /><br />  
  29.         <a href="javascript:void(0)" onclick="show(event)">show div center</a>  
  30.     </div>  
  31. </body>     
  32. </html>    
分享到：
| javascript语法着色和检查代码，非常的简单 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    发布一个实用的js window封装类

    NULL 博文链接：https://zdz8207.iteye.com/blog/431813

    jkdrag网页层模块拖动插件，较多的JS封装类.rar

    里面有较多的JS封装类，比如数组类，可在数组中的每个项上运行一个函数，并将全部结果作为数组返回，也可在在数组中的每个项上运行一个函数，并将函数返回真值的项作为数组返回;浏览器兼容性测试类，包括检测js的...

    EXTJS实用开发指南_个人整理笔记.pdf

    EXTJS的组件体系由Component类定义，每一种组件都有一个指定的xtype属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。EXTJS的组件体系可以分成三大类，即基本组件、工具栏组件、表单及元素组件...

    JavaScript XML操作 封装类

    if (window.ActiveXObject){isIE=true;}else{isIE=false;} var node_xml; var xmlDoc; if (isIE){ xmlDoc = new ActiveXObject(“Msxml2.DOMDocument”); } else{ if (document.implementation && document....

    JavaScript王者归来part.1 总数2

    　7.3.1 构造函数--一个双精度浮点数封装类的例子　 　7.3.2 缺省构造和拷贝构造　 　7.3.3 对象常量　 　7.4 对象的销毁和存储单元的回收　 　7.5 JavaScript的内置对象　 　7.5.1 Math对象　 　7.5.2 Date对象--...

    Selenium处理弹出窗口.docx

    这里介绍了chooseCancelOnNextConfirmation、chooseOkOnNextConfirmation等JavaScript脚本实现的弹出窗口处理函数，selenium会弹出网页窗口，因为它重写了window.open在文件selenium-browserbot.js函数BrowserBot....

    jObject.js:简单JavaScript API-开源

    jObject.js是一个简单JavaScript API，可帮助用户轻松快捷地开发Web应用程序客户端。 它提供CSS操作，支持按类获取元素，包括事件处理，表单验证，简化的AJAX，优美的ModalWindow，日历，计时器以及一些系统支持功能...

    iejoyswebos for .net WEBOS桌面开发框架程序

    iejoyswebos for .net 桌面开发框架程序是一个仿Window Vista的Web桌面开发系统 建议使用IE7或火狐浏览器！ 本程序使用了EXTJS3.3最新版本！并对EXTJS中原有的一些不适合大型项目使用的方法进行了改写，具体有： 1...

    【JavaScript源代码】JavaScript中BOM和DOM详解.docx

    JavaScript中BOM和DOM详解 　目录　BOM（浏览器对象模型） 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. location 6. history 7. navigator 获取浏览器相关...

    400个DreamWeaver插件

    mxp/在代码编辑框中选择一段脚本代码，然后使用这个插件，可以把这些代码放到一个单独的js文件中 mxp/在Dreamweaver中快速的插入一个Fireworks做好的图片，不过好象只能做空白图 ：（ mxp/这个插件用来代替...

    【JavaScript核心技术卷】JS的逻辑内存模型

    文章目录JavaScript的逻辑内存模型一、面向对象的三要素二、JavaScript的逻辑内存模型三、JavaScript的对象与Java的实例四、window对象的内存逻辑模型五、Object构造函数的内存逻辑模型六、Function构造函数的内存...

    asp.net中利用C#代码实现js特效通用类

    利用asp.net轻松实现js里面的alert，windows弹窗，返回上级history.go，已经关闭窗体 window.close();等功能，不用每次要在事件下写繁杂的Response.Write("&lt;script&gt;alert('你不具备该模块管理权限，请联系管理员！')...

    ExtAspNet_v2.3.2_dll

    -一个典型应用，在Window控件中打开新页面，如果传递的参数不正确，则首先提示参数不对然后关闭此弹出窗口。 -ExtAspNet.Alert.Show("参数错误！", String.Empty, ExtAspNet.ActiveWindow.GetCloseReference());...

    ExtAspNet v2.2.1 （2009-4-1） 值得一看

    -修正了IE下Grid中的一个JS问题(feedback:lqm4108)。 -修正Alert消息中引号未编码导致的JS错误(feedback:sun1299shine)。 +集成extjs3.0.3。 -修正弹出对话框的宽度计算错误(会保持最小的状态)。 -增加新的...

    iejoyswebos for .net 桌面开发框架程序V1.02

    1． 较上一版本，增加一个frameset模块，是基于 iejoyswebos桌面的程序框架模块，可以用它来做桌面程序集合应用，它也是动态加载所集合模块JS包和CSS包，并且与桌面加载不冲突，它所加载的功能是以tabpanel的模式...

    Javascript学习笔记.docx

    封装一个数组类 2 函数使用时注意事项 2 with语句 4 for，in 4 DOM 5 window 6 table 9 input 16 select 17 form 19 Ajax 22 接收文本数据 22 接收xml数据 23 接收json数据 24 多级菜单 25 用json...

    qWikiOffice v1.0 alpha.rar

    软件介绍 qWikiOffice(以下简称Qo)是一个开源的仿Window Vista的Web桌面系统，Qo的桌面图形界面基于Ext Js的Ajax框架。Qo不仅外观友好且为开发人员开发插件提供了强大的平台，您可以在Qo里很快的开发属于自己的应用...

    jQuery弹出框代码封装DialogHelper

    于是就有了下面这个简单的DialogHelper辅助类，因为这篇文章分享的重点是思路，所以目前版本的代码也还非常粗糙。思路对了，后续再封装成什么样都不过是形式而已，希望这个思路能给大家点启迪，同时欢迎大家开拓思维...

    关于JS模块化的知识点分享

    模块化是一个语言膨胀的必经之路，它能够帮助开发者拆分和组织代码。 Module模式 在模块化规范形成之前，JS开发者使用Module设计模式来解决JS全局作用域的污染问题。Module模式最初被定义为一种在传统软件工程中为...

    通过jQuery源码学习javascript(二)

    jQuery就是一个函数，你也可以把它当成类（呵呵，本身就是类）。 代码如下: (function(){ var jQuery = function() { // 函数体 } window.jQuery = window.$ = jQuery; })(); console.log(jQuery); 上面的空函数...

Magicbox
Global site tag (gtag.js) - Google Analytics