仿163首頁的廣告收縮效果/選單滑動/進度條
首頁的廣告收縮效果
<style>
#top{
position:relative;
}
#content{
position:absolute;
}
</style>
</head>
<body onload="moveDown()" style="margin:0px; 0px;">
<div id="top" style="width:100%; height:100px; background-color:#0000CC">網頁的廣告部分<br>
</div>
<div id="content" style="width:100%; height:500px; background-color:#FF0000">這是網頁的正文部分</div>
</body>
</html>
<script language="javascript" type="text/javascript">
//定義要移動的距離
var h=0;
var maxheight=300;
var st;
var top=document.getElementById("top");
//初始時，設定top為隱藏狀態
top.style.display="none";
//定義讓廣告部分展開
function moveDown(){
//累加
h+=2;
//設定高度等於我們累加的值
top.style.height=h+"px";
//設定層顯示
top.style.display="block";
//判斷是否到最大
if(h<=maxheight){
st=setTimeout("moveDown()",50);
}else{
clearTimeout(st);
//延遲3秒，開始收縮
setTimeout("moveUp()",3000);
}
}
//定義讓廣告部分收縮
function moveUp(){
//設定
h-=2;
//設定高度等於我們累加的值
top.style.height=h+"px";
//設定層顯示
top.style.display="block";
if(h<=0){
top.style.display="none";
//清空定時器
clearTimeout(st);
}else{
//如果h>0,則繼續收縮
st= setTimeout("moveUp()",100);
}
}
</script>
選單滑動
<style>
div{
display:none;}
ul{
list-style-type:none;
margin-top:0px;
margin-left:-20px;
}
li{
width:80px;
background-color:#FFFFFF;
display:block;
padding:4px 0px 2px 0px;
text-align:center;
}
li a{
color:#666;
text-decoration:none;
padding:4px 0px 2px 0px;
}
li a:hover{
color:#00F;
background-color:#FF0;
display:block;
border-style:solid;
border-width:2px;
border-color:#0C0;
}
span a:hover{
color:#FF0;
}
span a{
text-decoration:none;
}
</style>
<script language="javascript" type="text/javascript">
function Show(dnum){
document.getElementById(dnum).style.display="block";
}
function Hidden1(dnum){
document.getElementById(dnum).style.display="none";
}
</script>
</head>
<body>
<table width="385" border="0">
<tr>
<th width="93" height="59" bgcolor="#FFFF00" scope="col" onmouseover="Show(1)" onmouseout="Hidden1(1)"><span><a class="t" href="#">武俠小說</a></span></th>
<th width="93" bgcolor="#FFFF00" scope="col" onmouseover="Show(2)" onmouseout="Hidden1(2)"><span><a class="t" href="#">玄幻</a></span></th>
<th width="93" bgcolor="#FFFF00" scope="col" onmouseover="Show(3)" onmouseout="Hidden1(3)"><span><a class="t" href="#">網遊</a></span></th>
<th width="93" bgcolor="#FFFF00" scope="col" onmouseover="Show(4)" onmouseout="Hidden1(4)"><span><a class="t" href="#">穿越</a></span></th>
</tr>
<tr>
<td height="94" bgcolor="#FFFFFF" onmouseover="Show(1)" onmouseout="Hidden1(1)">
<div id="1" >
<ul>
<li><a href="#">金列</a></li>
<li><a href="#">銀列</a></li>
<li><a href="#">同列</a></li>
<li><a href="#">鐵列</a></li>
</ul>
</div>
</td>
<td bgcolor="#FFFFFF" onmouseover="Showc(2)" onmouseout="Hidden1(2)">
<div id="2">
<ul>
<li><a href="#">金列</a></li>
<li><a href="#">銀列</a></li>
<li><a href="#">同列</a></li>
<li><a href="#">鐵列</a></li>
</ul>
</div></td>
<td bgcolor="#FFFFFF" onmouseover="Show(3)" onmouseout="Hidden1(3)">
<div id="3" >
<ul>
<li><a href="#">金列</a></li>
<li><a href="#">銀列</a></li>
<li><a href="#">同列</a></li>
<li><a href="#">鐵列</a></li>
</ul>
</div></td>
<td bgcolor="#FFFFFF" onmouseover="Show(4)" onmouseout="Hidden1(4)">
<div id="4">
<ul>
<li><a href="#">金列</a></li>
<li><a href="#">銀列</a></li>
<li><a href="#">同列</a></li>
<li><a href="#">鐵列</a></li>
</ul>
</div></td>
</tr>
</table>
進度條
<body>
<div id="loadbar" style="background-color:#FFFF00; border:solid 2px #FF0000; width:70%; height:60px; margin:auto">
</div>
</body>
</html>
<script language="javascript" type="text/javascript">
//要現實的數字
var c=0;
//輸出現實的內容
var bar="";
//顯示的格式
var style1="$";
function loadBar(){
//拼接現實的字串內容
bar=bar+style1;
//百分數累加
c++;
document.getElementById("loadbar").innerHTML=bar+" "+c+"%";
if(c<=100){
setTimeout("loadBar()",50);
}else{
location="163.html";
}
}
loadBar();
</script>