jQuery實現(xiàn)頁面頂部顯示的進度條效果完整實例
更新時間：2015年12月09日 11:27:29 作者：NW_KNIFE
這篇文章主要介紹了jQuery實現(xiàn)頁面頂部顯示的進度條效果,以完整實例形式分析了jQuery基于animate與setTimeout定時觸發(fā)實現(xiàn)進度條漸進顯示功能,非常簡單實用,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)頁面頂部顯示的進度條效果。分享給大家供大家參考，具體如下：
具體代碼如下：
<!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程序設計有所幫助。
相關文章
jQuery已經(jīng)被廣泛使用，憑借其簡潔的API，對DOM強大的操控性，易擴展性越來越受到web開發(fā)人員的喜愛，我在社區(qū)也發(fā)布了很多的jQuery插件2009-07-07
下面小編就為大家?guī)硪黄侣勆舷聺L動jquery 超簡潔(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
jquery+h5實現(xiàn)九宮格抽獎特效(前后端代碼)
這篇文章主要為大家詳細介紹了jquery+h5實現(xiàn)九宮格抽獎特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
大家應該都會有這樣一種感覺，data函數(shù)在jQuery中看起來很不起眼, 就像沙灘上一顆平凡的沙子, 但仔細一瞅, 卻驚訝的發(fā)現(xiàn)data是jQuery中無比重要的一環(huán), 甚至jQuery中各種事件都基于此。下面就來詳細深入的學習下jQuery中的data()，感興趣的朋友們可以參考借鑒。2016-12-12
jQuery選擇器的強大不僅在于選擇器支持基本的css選擇符，還支持很多CSS的偽類選擇符，甚至可以自定義選擇符2013-04-04
深入解析jQuery中Deferred的deferred.promise()方法
這篇文章主要介紹了jQuery中Deferred的deferred.promise()方法,提醒千萬要注意deferred.promise()與jQuery的.promise() 實例方法的區(qū)別,需要的朋友可以參考下2016-05-05
這篇文章主要為大家詳細介紹了PHPjquery+ajax實現(xiàn)分頁的代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
因為最近技術長進緩慢，也沒高手帶，只能靠自己了，所以想仿個WEBQQ來鍛煉下自己。做之前最好先把必要的東西準備好2011-12-12
jQuery旋轉(zhuǎn)插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
網(wǎng)上發(fā)現(xiàn)一個很有意思的jQuery旋轉(zhuǎn)插件，支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome，高級瀏覽器下使用Transform，低版本ie使用VML實現(xiàn),感興趣的朋友可以了解下2013-01-01
jquery實現(xiàn)鼠標拖拽滑動效果來選擇數(shù)字的方法
這篇文章主要介紹了jquery實現(xiàn)鼠標拖拽滑動效果來選擇數(shù)字的方法,涉及jQuery鼠標事件的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-05-05