设为首页 加入收藏
当前位置:首页 > 整站内容 > 特效代码 > 页面特效 > 详细内容
两款网页或文件加载Loading进度条效果
发布时间:2010-3-19  阅读次数:9726  字体大小: 【】 【】【

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效|Linkweb.cn/Js|---网页或文件加载Loading进度条效果之四</title>

</HEAD>
<body style="background:black">
<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>
<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>

预览效果

天猫商城    聚划算    天猫电器城    淘宝旅行    天猫超市    淘宝游戏    天猫品牌特卖    天猫母婴

我要评论
  • 匿名发表
  • [添加到收藏夹]
  • 发表评论:(匿名发表无需登录,已登录用户可直接发表。) 登录状态:未登录
最新评论
所有评论[0]
    暂无已审核评论!

全站链接: 
收录查询
分享按钮