css遮罩层与fixed

页面上经常用到遮罩层,

1.下面用纯css写的一个兼容ie6/7/8/9/firefox/chrome/opera/safari

还有IE6给body或html加固定背景图滚动条滚动时模拟fixed的absolute层不抖动。

详细见代码:

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>fixed</title>

<style type="text/css">

*

{

margin:0;

padding:0;

}

html

{

_background:#151515 url(*) fixed; /*html或body加固定的背景图ie6滚动时不抖动*/

}

#overlay

{

width:100%;

height:100%;

position:fixed;

_position:absolute;

_width:expression(document.documentElement.scrollWidth);

_height:expression(document.documentElement.scrollHeight);

left:0;

top:0;

background:#999999;

filter:alpha(opacity=50);

opacity:0.5;

z-index:1000;

}

.ads

{

position:fixed;

_position:absolute;

_top:expression(eval(100 + document.documentElement.scrollTop));

top:100px;

left:0;

width:200px;

height:200px;

border:1px solid #006633;

background:#996699;

z-index:2000;

}

.content

{

height:9000px;

width:9000px;

}

</style>

</head>

<body>

<div id="overlay"></div>

<div class="ads"></div>

<div class="content">

content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />

</div>

</body>

</html>

2.用脚本

        var relWidth;

varrelHeight;

if(document.documentElement&&document.documentElement.clientHeight){

vardoc=document.documentElement;

relWidth=(doc.clientWidth>doc.scrollWidth)?doc.clientWidth-1:doc.scrollWidth;

relHeight=(doc.clientHeight>doc.scrollHeight)?doc.clientHeight:doc.scrollHeight;

}

else{

vardoc=document.body;

relWidth=(window.innerWidth>doc.scrollWidth)?window.innerWidth:doc.scrollWidth;

relHeight=(window.innerHeight>doc.scrollHeight)?window.innerHeight:doc.scrollHeight;

        }

相关推荐