js寫出遮罩層登陸框和對(duì)聯(lián)廣告并自動(dòng)跟隨滾動(dòng)條滾動(dòng)

更新時(shí)間：2014年04月29日 15:31:39 作者：

這篇文章主要介紹了js寫出遮罩層登陸框和對(duì)聯(lián)廣告并自動(dòng)跟隨滾動(dòng)條滾動(dòng),需要的朋友可以參考下

用JS寫出遮罩層登陸框和對(duì)聯(lián)廣告并自動(dòng)跟隨滾動(dòng)條滾動(dòng)保持讓用戶一直可以看到

好了，天色已晚廢話不多說，代碼特別詳細(xì) 有注釋，請(qǐng)看代碼。

 
<!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=UTF-8" /> 
<title>越獄的囚徒</title> 
<style type="text/css"> 
#zhezhao{ /*遮罩層 先隱藏起來 后面我會(huì)通過JS修改display: 為block 讓他顯示出來*/ 
position:absolute; 
z-index:1000; 
background:#ccc; 
width:100%; 
height:100%; 
opacity: 0.8; 
filter:alpha(opacity=80); 
display:none; 
} 
#denglu{ /*登陸層 先隱藏起來 后面我會(huì)通過JS修改display: 為block 讓他顯示出來*/ 
position:absolute; 
z-index:2000; 
width:100%; 
height:200px; 
margin:150px auto; 
display:none; 
} 
#denglu table{ /*居中顯示*/ 
margin:auto; 
} 
.content{ 
width:800px; 
margin:0 auto; 
} 
#zuo{ /*這個(gè)是兩邊浮動(dòng)的廣告對(duì)聯(lián)，一(左)一右*/ 
position:absolute; 
left:3px; 
top:100px; 
border:5px solid purple; 
background:#ccc; 
color:purple; 
font-size:50px; 
text-align:center; 
height:200px; 
width:85px; 
z-index:2000; 
} 
#you{ /*這個(gè)是兩邊浮動(dòng)的廣告對(duì)聯(lián)，一左一(右)*/ 
position:absolute; 
right:3px; 
top:100px; 
border:5px solid purple; 
background:#ccc; 
color:purple; 
font-size:50px; 
text-align:center; 
height:200px; 
width:85px; 
z-index:2000; 
} 
</style> 
<script type="text/javascript"> 
var h=0; 
function fun1(){ //這里讓登陸框 和 廣告框 隨著滾動(dòng)條也自動(dòng)滾動(dòng) 保持一直可以讓用戶看到 
h=document.body.clientHeight; 
document.getElementById('zhezhao').style.height=h+"px"; 
window.onscroll=function(){ 
//改變登錄框的位置 
//獲取滾動(dòng)條離開上方的距離 
var t=document.body.scrollTop+document.documentElement.scrollTop;//兼容谷歌和火狐瀏覽器 
//把這個(gè)值，交給denglu這div的margin-top 
document.getElementById('denglu').style.marginTop=150+t+"px"; 

document.getElementById('zuo').style.top=100+t+"px"; 
document.getElementById('you').style.top=100+t+"px"; 
} 
} 
function show(){ //激活他們 
//遮罩層 
document.getElementById('zhezhao').style.display='block'; 
//登錄層 
document.getElementById('denglu').style.display='block'; 
} 
function hide(){ //隱藏他們 
//遮罩層 
document.getElementById('zhezhao').style.display='none'; 
//登錄層 
document.getElementById('denglu').style.display='none'; 
} 

</script> 
</head> 
<body style="margin:0;" onload="fun1();"> 
<div id="zuo">美<br/>女</div> 
<div id="you">帥<br/>哥</div> 
<div id="zhezhao"></div> 
<div id="denglu"> 
<div> 
<table bgcolor="#ccc" width="350"> 
<tr> 
<td>登錄</td><td><a href="javascript:hide();">關(guān)閉</a></td> 
</tr> 
<tr> 
<td>賬號(hào)</td> 
<td><input type="text"/></td> 
</tr> 
<tr> 
<td colspan="2"><input type="submit" value="登錄"/></td> 
</tr> 
</table> 
<a id="a-1" href="javascript:void();">test</a> 
</div> 
</div> 
<a href="javascript:show();">登錄</a> 
<div class="content" style="background:red;"> 
<br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/> 
</div> 
<div class="content" style="background:green;"> 
<br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/> 
</div> 
<div class="content" style="background:blue;"> 
<br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/> 
</div> 
<br/> 
<br/> 
</body> 
</html> 