网页中可关闭的漂浮窗口实现可自行调节
作者：
广告式的漂浮窗口，想必大家并不陌生吧，下面为大家简单介绍下具体的实现，有需要的朋友可以参考下
注释部分为广告的左右调节，可以自行设定
<!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>
<title>网页中可关闭的漂浮窗口</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
</head>
<body style="background-color:#09C">
<div id="ShowAD" style="position:absolute;z-index:100;">
<div style="width:135;height:18px;font-size:14px;font-weight:bold;text-align:left;cursor:hand;" onClick="closead();"><font color="ff0000">关闭</font><br/>
点击这里，关闭广告！！！<br><a href="/jscss/"><img src="img/ads1.png"></a>
</div>
<script type="text/javascript">
var bodyfrm = ( document.compatMode.toLowerCase()=="css1compat" ) ? document.documentElement : document.body;
var adst = document.getElementById("ShowAD").style;
adst.top = ( bodyfrm.clientHeight -530-22 ) + "px";
//adst.left = ( bodyfrm.clientWidth -155) + "px";
function moveR()
{
adst.top = ( bodyfrm.scrollTop + bodyfrm.clientHeight - 530-22) + "px";
//adst.left = ( bodyfrm.scrollLeft + bodyfrm.clientWidth - 155 ) + "px";
}
setInterval("moveR();", 80);
function closead()
{
adst.display='none';
}
</script>
<div id="Content" style="height:1200px;"></div>
</body>
</html>
复制代码 代码如下:
<!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>
<title>网页中可关闭的漂浮窗口</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
</head>
<body style="background-color:#09C">
<div id="ShowAD" style="position:absolute;z-index:100;">
<div style="width:135;height:18px;font-size:14px;font-weight:bold;text-align:left;cursor:hand;" onClick="closead();"><font color="ff0000">关闭</font><br/>
点击这里，关闭广告！！！<br><a href="/jscss/"><img src="img/ads1.png"></a>
</div>
<script type="text/javascript">
var bodyfrm = ( document.compatMode.toLowerCase()=="css1compat" ) ? document.documentElement : document.body;
var adst = document.getElementById("ShowAD").style;
adst.top = ( bodyfrm.clientHeight -530-22 ) + "px";
//adst.left = ( bodyfrm.clientWidth -155) + "px";
function moveR()
{
adst.top = ( bodyfrm.scrollTop + bodyfrm.clientHeight - 530-22) + "px";
//adst.left = ( bodyfrm.scrollLeft + bodyfrm.clientWidth - 155 ) + "px";
}
setInterval("moveR();", 80);
function closead()
{
adst.display='none';
}
</script>
<div id="Content" style="height:1200px;"></div>
</body>
</html>