打印

绝对居中与覆盖全屏

asgardmoon [楼主]

笑笑十年

银牌会员

帖子: 807
体力: 1069
威望: 1
离线: 1 天

1^# 大中小发表于 2008-6-30 10:54

估计很多人和我一样遇到过类似的问题，但是由于标准声明下和非标准声明下的情况不一样，所有也很头疼。
现总结下发2个方法，求批漏洞。
标准声明代码方便测试。

复制内容到剪贴板

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
	/**
	 * 考虑到非标准和标准模式下的 绝对居中
	*/
	function locationCenter(element)
	{
		document.body.style.height="100%";
		//对象的宽高计算
		var w=element.offsetWidth;
		var h=element.offsetHeight;
		//窗口的可视宽高计算 
		//标准模式下采用 document.documentElement 来获取，如果采用document.body得到的会是滚动宽高 而非可视宽高
		//非标准模式下document.documentElement的高度会为0 我们采用document.body来获取宽高 但是如果内容不足一屏 高度会不准确 因此我们开头设置document.body.style.height="100%";
		var x=document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
		x= x==0? document.body.clientWidth : x;
		var y=document.documentElement ? document.documentElement.clientHeight : document.body.clientHeight;
		y= y==0? document.body.clientHeight : y;
		//滚动距离计算
		//原因同上
		var t=document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop;
		t=t==0 ?document.body.scrollTop : t; 
		var l=document.documentElement ? document.documentElement.scrollLeft : document.body.scrollLeft;
		l=l==0 ? document.body.scrollLeft : l; 
		element.style.position="absolute";
		element.style.top=(y-h)/2+t+'px';
		element.style.left=(x-w)/2+l+'px';
		
		return element;
	}
	/**
	 * 遮罩的全面覆盖
	*/
	function maskScreen(element)
	{
		//反正取最大的是没错的。。。
		document.body.style.height="100%";
		var scrollW=Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
		var scrollH=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
			scrollH=Math.max(scrollH,Math.max(document.body.clientHeight,document.documentElement.clientHeight));
		if(element.tagName.toLowerCase()=='iframe')
		{
			element.width=scrollW+"px";
			element.height=scrollH+"px";
		}
		else
		{
			element.style.width=scrollW+"px";
			element.style.height=scrollH+"px";
		}
		//设置样式
		element.style.position="absolute";
		element.style.top=0;
		element.style.left=0;
		element.style.opacity=0.5;
		element.style.filter='alpha(opacity=50)';
		
		return element;
	}
function init()
{
maskScreen(document.getElementById("mask"));
locationCenter(document.getElementById("login"))
}
	window.onload=init;
	window.onscroll=init;
	window.onresize=init;
</script>
</head>
<body>
	<div id="login" style="width:200px;height:160px;background-color:#EBFFFF;z-index:2;"></div>
	<div id="mask" style="z-index:1;background-color:#666666;"></div>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 asgardmoon 于 2008-6-30 11:08 编辑 ]

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

zidanezhicong

我爱阿仙奴

高级会员

帖子: 447
体力: 895
威望: 0
当前: 广东深圳
离线: 1 天

专长 前端制作

2^# 大中小发表于 2008-6-30 12:38

不用那么复杂吧，直接css可以实现效果。

提示：您可以先修改部分代码再运行

[ 本帖最后由 zidanezhicong 于 2008-6-30 12:40 编辑 ]

我爱阿仙奴！

TOP

美橙vps独立IP月付189元

asgardmoon [楼主]

笑笑十年

银牌会员

帖子: 807
体力: 1069
威望: 1
离线: 1 天

3^# 大中小发表于 2008-6-30 14:58

复制内容到剪贴板

代码:

overflow:hidden;

TOP

中央美院远程平面设计进修班

togoog

天使共舞

高级会员

帖子: 428
体力: 886
威望: 0
当前: 北京海淀区
离线: 14 天

专长 网页设计,ASP,搜索

4^# 大中小发表于 2008-7-2 12:52

不错,学习了

www.daming2004.com警告伱~

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

zwws

初级会员

帖子: 99
体力: 192
威望: 0
当前: 福建福州
离线: 19 天

专长 PHP

5^# 大中小发表于 2008-7-2 13:07

关于标准和非标准之间还有哪些偏差呢？

有没现成的资料？

TOP