像进度条的网页加载Loading JS代码

2024-09-05 12:18:41

字体：大中小

来源：转载

供稿：网友

JavaScript实现网页上常见的Loading效果，本款加载特效更像是windowsXP启动时候的进度条效果，左右来回跑动的彩带，并显示文字提示，程序正在加载中……，代码简洁实用，复制代码到你的网页中即可实现进度条效果。

<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>

上一篇：JS实现网页上的颜色拾色器

下一篇：百度站长平台链接自动提交-js代码推送进化版

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注