进度条风格动画滚动的Loading特效

2024-09-05 12:18:35

字体：大中小

来源：转载

供稿：网友

进度条风格动画滚动的Loading特效代码，似乎在Windows中是很常见的加载效果，不过这款是专用于网页的，主要由JavaScript代码实现，渐变效果也是基于JS和HTML实现的，在加载过程中，本Loading效果出现进度条，来回滚动，并显示字符，直至加载完成。

<html><HEAD><TITLE>Loading，正在下载中……</TITLE><div 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  style="position:absolute;top:30;left:120;font-size:9pt;color:#f4f4f4" id="abc">Loading.............</div></HEAD><body><script>s=new Array();s[0]="#050626";s[1]="#0a0b44";s[2]="#0f1165";s[3]="#1a1d95";s[4]="#1c1fa7";s[5]="#1c20c8";s[6]="#060cff";s[7]="#2963f8";function ls(){		pimg.innerHTML="";		for(i=0;i<9;i++){		pimg.innerHTML+="<input style=/"width:15;height:10;border:0;background:"+s[i]+";margin:1/">";		}	}	function rs(){		pimg.innerHTML="";		for(i=9;i>-1;i--){		pimg.innerHTML+="<input style=/"width:15;height:10;border:0;background:"+s[i]+";margin:1/">";		}	}	ls();var g=0;sped=0;function str(){	if(pimg.style.pixelLeft<350&&g==0){	if(sped==0){		ls();		sped=1;		}	pimg.style.pixelLeft+=2;	setTimeout("str()",1);	return;	}	g=1;	if(pimg.style.pixelLeft>-200&&g==1){	if(sped==1){		rs();		sped=0;		}	pimg.style.pixelLeft-=2;	setTimeout("str()",1);	return;	}	g=0;	str();}function flashs(){if(abc.style.color=="#ffffff"){	abc.style.color="#707888";	setTimeout('flashs()',500);	}else{	abc.style.color="#ffffff";	setTimeout('flashs()',500);	}}flashs();str();</script></body></html>

上一篇：Loading特效代码，很个性，很牛叉

下一篇：无刷新分页代码，jQuery分页完整示例