发布一个实用的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)
{
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)" onclick="show(event)">show div center</a>
</div>
</body>
</html>
分享到:
相关推荐
-修正了IE下Grid中的一个JS问题(feedback:lqm4108)。 -修正Alert消息中引号未编码导致的JS错误(feedback:sun1299shine)。 +集成extjs3.0.3。 -修正弹出对话框的宽度计算错误(会保持最小的状态)。 -增加新的...
1. 较上一版本,增加一个frameset模块,是基于 iejoyswebos桌面的程序框架模块,可以用它来做桌面程序集合应用,它也是动态加载所集合模块JS包和CSS包,并且与桌面加载不冲突,它所加载的功能是以tabpanel的模式...
-修正了IE下Grid中的一个JS问题(feedback:lqm4108)。 -修正Alert消息中引号未编码导致的JS错误(feedback:sun1299shine)。 +集成extjs3.0.3。 -修正弹出对话框的宽度计算错误(会保持最小的状态)。 -增加新的...
这里我整理了Android端会用到代码,包含JS通信,文件处理工具类,闪屏辅助类和WebView的封装。由于源码并没有完善,所以暂时没有发布到Maven仓库 用法 JS通信 需要把library中assets文件夹下的DeviceBridge.js放入...
它基本上是一个封装类,包含编码为 SDNV 的基本节点缓冲区。 此外,它还为您提供实用函数来按需编码和解码缓冲区。什么是 SDNV? SDNVs是由创建和他们的目标是克服在网络协议的固定尺寸字段的常见问题和限制(例如...
.NET关于string转换的一个小Bug Regular Expressions 完整的在.net后台执行javascript脚本集合 ASP.NET 中的正则表达式 常用的匹配正则表达式和实例 经典正则表达式 delegate vs. event 我是谁?[C#] 表达式计算引擎...
│ │ │ ├[思库教育]JS 第二集 写一个程序输出1到100这些数字.avi │ │ │ ├[思库教育]JS 第六 集 数组初步 (1).avi │ │ │ ├[思库教育]JS 第七集 数组初步 (2).avi │ │ │ ├[思库教育]JS 第三集 经过多少...
安卓上用于加载的Webview视图窗口只是作为类浏览器而存在,在安卓上更是只能同时运行一个Webview。(2)跨域数据交互问题。不同的Webview之间无法共享数据。(3)页面自适应问题。页面难以兼容适应不同分辨率的设备...
02 JS的window对象之定时器 03 JS的history对象和location对象 04 JS的DOM节点 05 JS的DOM节点 第43章 01 上节知识回顾 02 js之onsubmit事件与组织事件外延 03 DOM节点的增删改查与属性设值 04 正反选练习 05 js...