一个实用的js window封装类
发布一个实用的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.};