像進度條的網頁加載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   class="iwvjtn8m0"   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   class="iwvjtn8m0"   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代碼推送進化版