像进度条的网页加载Loading JS代码 - 特效代码 - 源码库资源博客

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

作者: 泽以

全网优秀的源码分享库

手机扫码查看

标签:

js

特别声明:本站提供下载的源码大部分为网络收集,使用中不提供任何帮助,如有侵权请联系!

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>
分享到:
打赏
未经允许不得转载:

作者: 泽以, 转载或复制请以 超链接形式 并注明出处 源码库资源博客
原文地址: 《像进度条的网页加载Loading JS代码》 发布于2020-1-28

评论

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏