信鸽网

jQuery实现页面顶部显示的进度条效果完整实例

  作者：bea

本文实例讲述了jQuery实现页面顶部显示的进度条效果。分享给大家供大家参考，具体如下： 具体代码如下： <!Doctype html><html><head><title>页面顶部显示的进度条效果</title><meta http-equiv=Content-Type content="text/html;charset=utf-8"></head><body><di

本文实例讲述了jQuery实现页面顶部显示的进度条效果。分享给大家供大家参考，具体如下：


具体代码如下：




<!Doctype html>

<html>

<head>

<title>页面顶部显示的进度条效果</title>

<meta http-equiv=Content-Type content="text/html;charset=utf-8">

</head>

<body>

<div id="web_loading"><div></div></div>

<script src="jquery1.8.3.min.js" type="text/javascript"></script>

<script type="text/javascript">// < ![CDATA[

  jQuery(document).ready(function(){

    jQuery("#web_loading div").animate({width:"100%"},800,function(){ 

      setTimeout(function(){jQuery("#web_loading div").fadeOut(500); 

      }); 

    }); 

  });

// ]]></script>

<style>

#web_loading{

z-index:99999;

width:100%;

}

#web_loading div{

width:0;

height:5px;

background:#FF9F15;

}

</style

</body>

</html>


完整实例代码点击此处本站下载。


希望本文所述对大家jQuery程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: