928
<!DOCTYPE html> <html> <head> <title>欢迎！黄手绢工作室.Happy </title> </head> <body> <link rel="stylesheet" href="heatstyle.css"> <div id="header"> <div id="titlebgleft" class="titlebg"></div> <div id="titlebgright" class="titlebg"></div> <div id="squareleft"></div> <div id="squareright"></div> <div id="nav"> <span id="title">Happy. 黄手绢工作室</span> <ul id="navlist"> <li onclick="navchoose(‘posts‘)">阅读</li> <li onclick="navchoose(‘chat‘)">交流</li> <li onclick="navchoose(‘movies‘)">欣赏</li> <ul> </div> </div> <div id="content"> <div id="choose"></div> <div id="news"></div> <div id="loading"></div> <div id="posts"> <div class="post"> <div class="post_title">心灵的使者</div> <div class="post_content"> 光明 </div> <div class="post_read"> 展开全文 </div> </div> </div> <div id="chat"> </div> <div id="movies"> </div> </div> <script src="heatfunc.js"></script> </body> </html>
*{
outline:none;
}
*::-moz-focus-inner{
border:0;
}
body{
background-color:#FDFDFA;
width:100%;
height:100%;
overflow:auto;
}
#nav{
width:100%;
font-size:2.5em;
padding-left:1em;
padding-top:0.5em;
}
#navlist{
margin-left:9.5em;
position:absolute;
}
#navlist li{
width:3em;
color:#222222;
background-color: rgba(255,255,255,0);
text-align:center;
display:inline;
padding:0.5em;
}
#nav #title,#title:link,#title:hover,#title:active,#title:visited{
z-index:100;
background-color:rgba(255,255,255,0);
color:#5D5D5C;
text-align:center;
position:absolute;
margin-top:1em;
}
.titlebg{
z-index:80;
position:absolute;
width:19em;
height:20em;
background-color:#FFFBDA;
}
#titlebgleft{
margin-left:-1em;
margin-top:-10em;
transform:rotate(-10deg);
}
#titlebgright{
margin-left:10em;
margin-top:-10em;
transform:rotate(10deg);
}
#squareleft{
position:absolute;
z-index:90;
margin-left:-1em;
margin-top:-1em;
width:2.1em;
height:13em;
background-color:#FDFDFA;
}
#squareright{
position:absolute;
z-index:90;
margin-left:27em;
margin-top:-1em;
width:3em;
height:13em;
background-color:#FDFDFA;
}
#navlist li:hover{
color:#5B5B5B;
}
#content{
width:100%;
margin-top:11em;
}
#content div{
z-index:-10;
}
#content #loading{
margin:auto;
z-index:10;
}
#content #choose{
z-index:20;
}
var loadimg = {"posts":"","chat":"","movies":""},contents=["posts","chat","movies"];
function navchoose(where){
changecontent(where)
window.location.href="#"+where;
}
function getdata(url){
xhr=new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHttp")
xhr.open("GET",url,true)
xhr.responseType="text"
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status==200){
return xhr.response;
}
else{
/*调试
alert("信号不好,加载不出来啦##xhr.status"+xhr.status)
*/
console.log("AJAX网络故障:xhr.status"+xhr.status)
return null;
}
}
else{
/*调试
alert("奇怪的网络故障:xhr.readyState"+xhr.readyState)
*/
console.log("网络故障:xhr.readyState"+xhr.readyState)
return null;
}
};
xhr.send()
}
function changecontent(which){
put=document.getElementById(which)
for(i=0;i<contents.length-1;i++){
document.getElementById(contents[i]).style.display="none";
}
loadtag = document.getElementById("loading")
loadtag.innerHTML="<img src=‘"+loadimg[which]+"‘></img>"
loadtag.style.display="block";
inner=getdata("GET","https://www.cnblogs.com/...")//content
/*放入信息(如posts)
put.innerHTML=...
*/
put.style.display="block";
loadtag.style.display="none";
}
//init
urlnow=window.location.href
if(urlnow.indexOf("#")+1){
changecontent(urlnow.substring(urlnow.indexOf("#")+1,urlnow.length));
}
else{
changecontent("posts");
}
//init.
原文：https://www.cnblogs.com/mooling/p/hsj.html