博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
一个实用的js window封装类
阅读量:5817 次
发布时间:2019-06-18

本文共 7467 字,大约阅读时间需要 24 分钟。

hot3.png

发布一个实用的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.  134.      146.    
147. I'm a div,I can show and fixed in center! 148.
149.
150.
151.
show div center 152.
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.};

     
              
         
coos.extend.window Build Test Page         
                   
          html,body {margin: 0; padding: 0;height:100%;font-size: 14px;}               
         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();       }             
          I'm a div,I can show and fixed in center!             
          
          
show div center                 

 

转载于:https://my.oschina.net/huangxian/blog/86999

你可能感兴趣的文章
Apache配置
查看>>
Android SDK 的下载代理
查看>>
Method Swizzling对Method的要求
查看>>
佛祖保佑,永不宕机
查看>>
四、配置开机自动启动Nginx + PHP【LNMP安装 】
查看>>
Linux 目录结构及内容详解
查看>>
Oracle命令导入dmp文件
查看>>
OCP读书笔记(24) - 题库(ExamD)
查看>>
解决Unable to load R3 module ...VBoxDD.dll (VBoxDD):GetLastError=1790
查看>>
.net excel利用NPOI导入oracle
查看>>
$_SERVER['SCRIPT_FLENAME']与__FILE__
查看>>
My97DatePicker 日历插件
查看>>
hive基本操作与应用
查看>>
excel快捷键设置
查看>>
poj3692
查看>>
python之信号量【Semaphore】
查看>>
html5纲要,细谈HTML 5新增的元素
查看>>
Android应用集成支付宝接口的简化
查看>>
[分享]Ubuntu12.04安装基础教程(图文)
查看>>
WCF
查看>>