jQuery實(shí)現(xiàn)頁(yè)面頂部顯示的進(jìn)度條效果完整實(shí)例

更新時(shí)間：2015年12月09日 11:27:29 作者：NW_KNIFE

這篇文章主要介紹了jQuery實(shí)現(xiàn)頁(yè)面頂部顯示的進(jìn)度條效果,以完整實(shí)例形式分析了jQuery基于animate與setTimeout定時(shí)觸發(fā)實(shí)現(xiàn)進(jìn)度條漸進(jìn)顯示功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)頁(yè)面頂部顯示的進(jìn)度條效果。分享給大家供大家參考，具體如下：

具體代碼如下：

<!Doctype html>
<html>
<head>
<title>頁(yè)面頂部顯示的進(jìn)度條效果</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>

完整實(shí)例代碼點(diǎn)擊此處本站下載。

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jquery.boxy彈出框(后隔N秒后自動(dòng)隱藏/自動(dòng)跳轉(zhuǎn))
對(duì)于 Boxy彈出框的使用之前寫(xiě)過(guò)一些文章（查看jquery.boxy基礎(chǔ)），今天主要是在解決一個(gè)需要之后，覺(jué)得值得把它記錄下來(lái)，所以就再寫(xiě)一篇，主要功能是，在彈出對(duì)話框后，隔N秒后自動(dòng)隱藏，還有就是自動(dòng)跳轉(zhuǎn)
2013-01-01
cookie的復(fù)制與使用記住用戶名實(shí)現(xiàn)代碼
正如標(biāo)題所言cookie如何復(fù)制、使用與記住用戶名，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下
2013-11-11
jQuery彈出窗口打開(kāi)鏈接的實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery彈出窗口打開(kāi)鏈接的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2016-12-12
jQuery 動(dòng)態(tài)酷效果實(shí)現(xiàn)總結(jié)
jQuery是一個(gè)優(yōu)秀的JavaScript框架，可以很好的解決不同瀏覽器兼容的問(wèn)題，尤其是在ASP.NET MVC下，它的作用更加的凸顯。
2009-12-12
最原始的jQuery注冊(cè)驗(yàn)證方式
這篇文章主要為大家詳細(xì)介紹了最原始的jQuery注冊(cè)驗(yàn)證方式,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
Jquery實(shí)現(xiàn)仿騰訊娛樂(lè)頻道焦點(diǎn)圖(幻燈片)特效
這篇文章主要介紹了Jquery實(shí)現(xiàn)仿騰訊娛樂(lè)頻道焦點(diǎn)圖(幻燈片)特效,需要的朋友可以參考下
2015-03-03
jQuery ui 1.7更新小結(jié)
因?yàn)橐o新員工進(jìn)行培訓(xùn)jQuery.UI方面的內(nèi)容，我之前學(xué)習(xí)的都是jquery.ui-1.6b的，現(xiàn)在的版本升級(jí)到j(luò)query-ui-1.7.1，除了樣式上有很大調(diào)整以外，API也有了很大的變化。
2009-08-08
JQuery實(shí)現(xiàn)相鄰item焦點(diǎn)移動(dòng)的示例詳解
這篇文章主要為大家介紹了如何利用JQuery實(shí)現(xiàn)相鄰item焦點(diǎn)移動(dòng)的效果，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)前端知識(shí)有一定的幫助，感興趣的可以學(xué)習(xí)一下
2022-04-04
使用jQuery.form.js/springmvc框架實(shí)現(xiàn)文件上傳功能
這篇文章主要介紹了使用jQuery.form.js/springmvc框架實(shí)現(xiàn)文件上傳功能，非常具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
2016-05-05
使用 jQuery.ajax 上傳帶文件的表單遇到的問(wèn)題
使用 jQuery 上傳帶文件的表單時(shí)，會(huì)遇到一些小問(wèn)題。今天小編抽時(shí)間給大家介紹使用 jQuery.ajax 上傳帶文件的表單遇到的問(wèn)題，感興趣的朋友一起看看吧
2016-10-10