标准布局应用：对联与旗帜

2006-12-11 00:00:00 作者：

标准布局应用：对联与旗帜

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta name="description" content="http://blog.pr1984.com - 代码剪辑库 ( PR 50198763 )" /> 
<title>符合标准的正常工作的对联广告</title> 
<script type="text/javascript"> 
<!--  
lastScrollY = 0; 
function heartBeat(){  
var diffY; 
if (document.documentElement && document.documentElement.scrollTop) 
 diffY = document.documentElement.scrollTop; 
else if (document.body) 
 diffY = document.body.scrollTop 
else 
    {/*Netscape stuff*/} 
  
//alert(diffY); 
percent=.1*(diffY-lastScrollY);  
if(percent>0)percent=Math.ceil(percent);  
else percent=Math.floor(percent);  
document.getElementById("leftDiv").style.top = parseInt(document.getElementById("leftDiv").style.top)+percent+"px"; 
document.getElementById("rightDiv").style.top = parseInt(document.getElementById("leftDiv").style.top)+percent+"px";

lastScrollY=lastScrollY+percent;  
//alert(lastScrollY); 
}

//下面这段删除后，对联将不跟随屏幕而移动。 
window.setInterval("heartBeat()",1); 
//--> 
</script>

/* 这里是设置对联样式滴 */ 
#leftDiv,#rightDiv{ 
   width:120px; /* 宽度 */ 
   height:250px; /* 高度 */ 
   background-color:#e5e5e5; /* 背景颜色 */ 
   border:1px solid #ddd; /* 边框样式 */ 
   position:absolute; /* 绝对定位激活 */ 
} 
--> 
</style> 
</head>

<body>

<div id="leftDiv" style="top:120px; /* 距离顶部120px */ left:2px; /* 距离左侧2px */ ">左侧广告内容</div> 
<div id="rightDiv" style="top:120px; /* 距离顶部120px */ right:2px; /* 距离右侧2px */ ">右侧广告内容</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]