最新消息:Excel无乱码转CSV,由于工作原因很少更新博客和回复大家的评论,非常抱歉。

用jQuery制作网页加载进度条

我在浏览网站时,发现有些网站加了当前网页加载进度条,你让有一种不想离开的感觉。因为显示该页马上就要加载完了,你说你还会关掉离开吗?

接下来把我做好的进度条代码贴出来,与大家分享:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hicoogle 进度条测试</title>
<style>
#page_loading{position:absolute;margin:0 auto !important;z-index:999;top:38px;width:960px;height:10px;}
#page_loading_in{height:10px;background:#227ad1;width:5%;}
</style>
<script language="javascript" src="jquery.js"></script>
</head>

<body>
<div>下面是进度条效果:</div>
        <div id="page_loading"><div id="page_loading_in"></div></div>
  <script language="javascript">jQuery("#page_loading_in").animate({width:"10%"}); </script>

    <script language="javascript">jQuery("#page_loading_in").animate({width:"50%"});</script>

<div style="margin-top:50px;">速度较快,看不到渐渐变长的效果,具体效果请看<a href="http://www.hicoogle.com">嗨·酷哥</a><a href="http://www.hicoogle.com">www.hicoogle.com</a></div>
<script language="javascript">
        jQuery("#page_loading_in").animate({width:"100%"},function(){
  setTimeout(function(){jQuery("#page_loading_in").animate({opacity:'toggle'},800);},800);
  setTimeout(function(){jQuery("#page_loading").remove();},1600);
 }); </script>
</body>
</html>

也许我写的并不符合大家的味口,至少我已经给出方法了,可以在这个基本上再进一步完善,欢迎大家在本文下方进行交流。

不知道各位有没有注意到,本站上方是否有加载进度闪过的视觉。看图片位置:

图片上红色位置处。

下载文件

转载请注明:嗨酷哥,有你更酷! » 用jQuery制作网页加载进度条

与本文相关文章

发表我的评论

取消评论
表情 插代码

Hi,您需要填写昵称和邮箱!

  • 必填项
  • 必填项

网友评论2条  本站回复1

  1. 我已经用了这个方法了~
    http://50vip.com/blog.php?i=127

    红色石头2013-03-11 16:51 回复
  2. 😮

    xz2012-08-09 10:33 回复