很不錯的同學代碼
<!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>
<link href="favicon.ico" rel="shortcut icon"/>
<style type="text/css">
*{margin:0; padding:0; text-decoration:none; border:0;}
body{background-image:url(http://image.tianjimedia.com/uploadImages/2012/273/SYJ43SG47PC8_NatGeo04.jpg); background-size:cover; transition:2s;}
#box{width:70%; height:200px; margin:20px auto; box-shadow:0 0 20px #000 inset; transition:0.2s;}
#box:hover{background-color:#000; opacity: 0.7;}
#box p{line-height:200px; text-align:center; font-size:72px; color:#000;}
#box a:hover p{color:#fff;}
#vice-box{width:70%; margin:20px auto; transition:0.2s;}
#limit{width:100%; overflow:hidden;}
#site{width:24%; height:150px; float:left; margin-left:0.5%; margin-right:0.5%; margin-top:5px; margin-bottom:5px; box-shadow:0 0 20px #000 inset; transition:1s;}
#site:hover{background-color:#000; opacity: 0.7;}
#site p{line-height:150px; text-align:center; font-size:36px; color:#000;}
#site a:hover p{color:#fff;}
#author{width:70%; height:50px; margin:0 auto;}
#name{display:block; width:30%; line-height:50px; margin:0 auto; text-align:center; color:#000; font:15px; transition:2s; cursor:pointer;}
#name:hover{color:#fff;}
#MrH{position:relative; top:5px; width:70%; margin:0 auto; z-index:1;}
#MrH img{position:relative; width:100%; height:0; z-index:1;}
#MrH p{position:absolute; display:inline-block; background-color:#000; opacity:0.8; width:50px; height:25px; line-height:25px; text-align:center; bottom:5px; right:5px; z-index:10; color:#fff; cursor:pointer; transition:1s;}
#MrH p:hover{opacity:1;}
#button{display:inline-block; width:100px; height:50px; position:fixed; right:50px; top:20px; opacity:0.7;color:#fff; cursor:pointer;}
#next{position:relative; float:right; width:50px; text-align:center; line-height:50px; font-size:25px; right:0; background-color:#000;}
#next:hover{opacity:0.9;}
#prev{position:relative; float:left; width:50px; text-align:center; line-height:50px; font-size:25px; left:0; background-color:#000;}
#prev:hover{opacity:0.9;}
</style>
<script type="text/javascript">
? ? var BGI=9;
? ? window.onload=function anonymous(){
? ? var name=document.getElementById("name");
var hiden=document.getElementById("hiden");
var next=document.getElementById("next");
var prev=document.getElementById("prev");
var page=document.getElementById("page");
? ? ? ? var box=document.getElementById("box");
? ? var Vbox=document.getElementById("vice-box");
var button=document.getElementById("button");
var name=document.getElementById("name");?
var maxImage=19;
var height=0;
name.onclick=function drop(){
if(height<450){
height+=1;
document.getElementById("photo").style.height=height+"px";
}
setTimeout(drop,1);
}
hiden.onclick=function cover(){
if(height>=0){
height-=1;
document.getElementById("photo").style.height=height+"px";
}
setTimeout(cover,1);
}
prev.onclick=function(){
? ? ? ? ? ? alert("抱歉，此頁面暫時無法更換背景圖。");
}
next.onclick=function(){
BGI++;
if(BGI>maxImage){
BGI=1;
}
alert("抱歉，此頁面暫時無法更換背景圖。");
}
function width(){
if(document.body.offsetWidth<971){
box.style.width="970px";
Vbox.style.width="970px";
button.style.right="0px";
name.style.width="290px";
}else{
box.style.width="70%";
Vbox.style.width="70%";
button.style.right="50px";
name.style.width="30%";
}
}
setInterval(width,500);
}
</script>
</head>
<body id="page">
<div id="MrH">
<a target="_blank" ><img title="點擊進入我的空間" id="photo" src="http://image.3001.net/images/new/pic-hk.jpg"></a>
? ? <p id="hiden">hiden</p>
</div>
<div id="button">
<p id="next" title="下一張背景圖">></p>
? ? <p id="prev" title="上一張背景圖"><</p>
</div>
<div id="box">
<a target="_new"><p>Baidu</p></a>
</div>
<div id="vice-box">
<div id="limit">
? ? <div id="site">
? ? ? ? <a target="_blank"><p>Youku</p></a>
? ? ? ? </div>
? ? ? ? <div id="site">
? ? ? ? <a target="_blank"><p>Taobao</p></a>
? ? ? ? </div>
? ? ? ? <div id="site">
? ? ? ? <a target="_blank"><p>Sina</p></a>
? ? ? ? </div>
? ? ? ? <div id="site">
? ? ? ? <a target="_blank"><p>Tiexue</p></a>
? ? ? ? </div>
? ? ? ? <div id="site">
? ? ? ? <a target="_blank"><p>Iqiyi</p></a>
? ? ? ? </div>
? ? ? ? <div id="site">
? ? ? ? <a target="_blank"><p>HNTV</p></a>
? ? ? ? </div>
? ? ? ? <div id="site">
? ? ? ? <a target="_blank"><p>Gamersky</p></a>
? ? ? ? </div>
? ? ? ? <div id="site">
? ? ? ? <a href="http://www.xianlaiwan.cn/" target="_blank"><p>Imooc</p></a>
? ? ? ? </div>
? ? ? ? <div id="site">
? ? ? ? <a target="_blank"><p>Google</p></a>
? ? ? ? </div>
? ? ? ? <div id="site">
? ? ? ? <a target="_blank"><p>Youtube</p></a>
? ? ? ? </div>
? ? ? ? <div id="site">
? ? ? ? <a target="_blank"><p>Twitter</p></a>
? ? ? ? </div>
? ? ? ? <div id="site">
? ? ? ? <a target="_blank"><p>Facebook</p></a>
? ? ? ? </div>
? ? </div>
</div>
<div id="author">
<p id="name">Made By Mr.H<br>QQ:1842452856 Tel:15674800401</p>
</div>
</body>
</html>
2015-11-19
id都重復使用了...........