网页加载中加载完成特效

胖子 2016-06-15 22:22:40 脚本代码无法统计

小中大

加载中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br />
<title>无标题文档</title><br />
</head><br />
<body><br />
 <script language="javascript">
var writeBoard = document.getElementById('fastposteditor');
var createDiv = document.createElement('div');
createDiv.setAttribute('id','rsf_lgf_bg');
createDiv.innerHTML = '<img id="rsf_lgf_bg_img" src="http://nao8yl.com/logo.png" />';
writeBoard.appendChild(createDiv);
var rsfBgDiv = document.getElementById('rsf_lgf_bg');
rsfBgDiv.style.width = (writeBoard.offsetWidth-2) + 'px';
rsfBgDiv.style.height = (writeBoard.offsetHeight -27) + 'px';
if('#FFFFFF'!=0){
rsfBgDiv.style.background = '#FFFFFF';
};
var rsfBgImg = document.getElementById('rsf_lgf_bg_img');
var rsfBgImgHeight = '130'>0&&'130'< =(writeBoard.offsetHeight -27)?'130':(writeBoard.offsetHeight -27);
rsfBgImg.style.height = parseInt(rsfBgImgHeight)+'px';
if ('4'== 1){
rsfBgImg.style.marginLeft = '0'+'px';
rsfBgImg.style.marginTop  = '0'+'px';
}else if('4' == 2){
rsfBgImg.style.margin = '0 auto';
rsfBgImg.style.marginTop  = '0'+'px';
}else if('4' == 3){
rsfBgImg.style.marginLeft = '0px';
rsfBgImg.style.marginTop  = '0'+'px';
rsfBgDiv.style.textAlign  = 'left';
}else if('4' == 4){
rsfBgImg.style.marginRight= '0px';
rsfBgImg.style.marginTop  = '0'+'px';
rsfBgDiv.style.textAlign  = 'right';
}
if('100'!=''){
if(document.all!=1){
 rsfBgImg.style.opacity='100'/100;
}
};
var fpMessage = document.getElementById('fastpostmessage');
if('12'!=''){
fpMessage.style.fontSize = '12'+'px';
};
if('#000000'!=''){
fpMessage.style.color = '#000000';
};
var fontFamily;
switch('3'-1){
case 0:
fontFamily = '宋体';
break;
case 1:
fontFamily = 'Arial';
break;
case 2:
fontFamily = '微软雅黑';
break;
case 3:
fontFamily = '黑体';
break;
default:
fontFamily = '宋体';
};
fpMessage.style.fontFamily = fontFamily;
</script><br />
</script><script type="text/javascript">
document.onreadystatechange = subSomething;
function delay1()
{
document.getElementById('circle1').style.cssText="display:none;";
setTimeout('delay2()', 50);
}
function delay2()
{
document.getElementById('circle').style.cssText="display:none;";
setTimeout('delay3()', 40);
}
function delay3()
{
document.getElementById('circletext').style.cssText="display:none;";
}
function subSomething()
{
if(document.readyState == "complete")
{
document.getElementById('circletext').innerHTML="完成咯";
setTimeout('delay1()', 20);
}
}
</script></p>
<style>
#circle{opacity:0; filter:alpha(opacity='0') background-color:#ffffff;border:5px solid #00a398;opacity:.9;border-right:5px solid rgba(0,0,0,0);border-left:5px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 35px #00a398;width:60px;height:60px;margin:0 auto;position:fixed;left:30px;bottom:30px;-moz-animation:spinPulse 1s infinite linear;-webkit-animation:spinPulse 1s infinite linear;-o-animation:spinPulse 1s infinite linear;-ms-animation:spinPulse 1s infinite linear;}
#circle1{opacity:0; filter:alpha(opacity='0') background-color:#ffffff;border:6px solid #00a398;opacity:.9;border-left:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 15px #00a398;width:40px;height:40px;margin:0 auto;position:fixed;left:39px;bottom:39px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;-o-animation:spinoffPulse 1s infinite linear;-ms-animation:spinoffPulse 1s infinite linear;}
#circletext{opacity:0; filter:alpha(opacity='0') width:46px;height:20px;margin:0 auto;position:fixed;left:46px;bottom:53px;color:#000}
@-moz-keyframes spinPulse{0%{-moz-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-moz-transform:rotate(145deg);opacity:1;}100%{-moz-transform:rotate(-320deg);opacity:0;}}
@-moz-keyframes spinoffPulse{0%{-moz-transform:rotate(0deg);}100%{-moz-transform:rotate(360deg);}}
@-webkit-keyframes spinPulse{0%{-webkit-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-webkit-transform:rotate(145deg);opacity:1;}100%{-webkit-transform:rotate(-320deg);opacity:0;}}
@-webkit-keyframes spinoffPulse{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);}}
@-o-keyframes spinPulse{0%{-o-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-o-transform:rotate(145deg);opacity:1;}100%{-o-transform:rotate(-320deg);opacity:0;}}
@-o-keyframes spinoffPulse{0%{-o-transform:rotate(0deg);}100%{-o-transform:rotate(360deg);}}
@-ms-keyframes spinPulse{0%{-ms-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-ms-transform:rotate(145deg);opacity:1;}100%{-ms-transform:rotate(-320deg);opacity:0;}}
@-ms-keyframes spinoffPulse{0%{-ms-transform:rotate(0deg);}100%{-ms-transform:rotate(360deg);}}
</style>
<div id="circle" style="opacity: 1;"></div>
<div id="circletext" style="opacity: 1;">加载中</div>
<div id="circle1" style="opacity: 1;"></div>
<p></body><br />
</html><br />

» 转载保留版权：技术爱好者 » 《网页加载中加载完成特效》

» 本文链接地址：https://www.jsahz.com/398.html