欢迎来到酷云建站平台,全网营销云系统加盟中心!

海量企业网站模板 · 任您选择

美出特色,精出品质,一切为了企业更好的营销

隐藏侧栏
Beta
转载

javascript中Loading进度条的网页加载效果

       延迟加载     2016-02-16     eycms     80     0    

<html>

<head>

<title>程序加载页面</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

</head>

<body style="background:black">

<div id="div1" style="position:absolute;width:322;height:14;border:1 #707888 solid;overflow:hidden">

<div style="position:absolute;top:-1;left:0" id="pimg">

</div>

</div>

<div id="div2" style="position:absolute;top:30;left:120;font-size:9pt;color:#f4f4f4">

正在加载中......

</div>

<script language="Javascript">

s=new Array("#050626","#0a0b44","#0f1165","#1a1d95","#1c1fa7","#1c20c8","#060cff");

//s=new Array("#333333","#555555","#777777","#999999","#AAAAAA","#CCCCCC","#EEEEEE");

div1.style.posTop=Math.floor((document.body.clientHeight-14)/2);

div1.style.posLeft=Math.floor((document.body.clientWidth-322)/2);

div2.style.posTop=parseInt(div1.style.posTop)+20;

div2.style.posLeft=parseInt(div1.style.posLeft)+120;

function Larrange(){

pimg.innerHTML="";

for(i=0;i<9;i++){

pimg.innerHTML+="<input style="width:15;height:10;border:0;background:"+s[i]+";margin:1">";

}

}

function Rarrange(){

pimg.innerHTML="";

for(i=9;i>-1;i--){

pimg.innerHTML+="<input style="width:15;height:10;border:0;background:"+s[i]+";margin:1">";

}

}

var is=0;size=0;

function move(){

if(pimg.style.pixelLeft<350&&is==0){

if(size==0){Larrange();size=1;}

pimg.style.pixelLeft+=3;

setTimeout("move()",1);

return;

}

is=1;

if(pimg.style.pixelLeft>-200&&is==1){

if(size==1){Rarrange();size=0;}

pimg.style.pixelLeft-=3;

setTimeout("move()",1);

return;

}

is=0;

move();

}

function flashs(){

if(div2.style.color=="#ffffff"){

div2.style.color="#707888";

setTimeout('flashs()',500);

}

else{

div2.style.color="#ffffff";

setTimeout('flashs()',500);

}

}

Larrange();

flashs();

move();

</script>

</body>

</html></td>

 </tr>

</table>


--结束END--

本文链接: http://www.83703228.cn/resources/loading/1131.html (转载时请注明来源链接)

 
本文标签: 全部

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“酷云”
"酷云平台前端开发教学"
每日干货技术分享
 

×

成为 酷云平台 代理商!

关注

微信
关注

微信扫一扫
获取最新优惠信息

酷云平台公众号

客服

联系
客服

很高兴为您服务
尊敬的用户,欢迎您咨询,我们为新用户准备了优惠好礼。 咨询客服

联系客服:

在线QQ: 3206174

客服电话: 0516-83703228

售前咨询 售后服务
在线交谈 智能小云

工作时间:

周一至周五: 09:00 - 17:00

WAP

手机
访问

移动端访问
手机上也能选模板

酷云平台手机端