jQuery動態進度條程式碼例項
進度條效果在很多應用中都有使用,下面就通過程式碼例項介紹一下,如何利用jquery實現此效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #web_loading{ z-index:99999; width:100%; } #web_loading div{ width:0; height:5px; background:#FF9F15; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#web_loading div").animate({width:"100%"},800,function(){ setTimeout(function(){ jQuery("#web_loading div").fadeOut(500); },00) }) }) </script> </head> <body> <div id="web_loading"> <div></div> </div> </body> </html>
以上程式碼實現了我們的要求,程式碼非常的簡單,這裡就不多介紹了,具體可以參閱相閱讀。
相關閱讀:
1.animate()函式可以參閱jQuery animate()一章節。
2.setTimeout()函式可以參閱window setTimeout()一章節。
3.fadeOut()函式可以參閱jQuery fadeOut()一章節。
相關文章
- jQuery進度條效果程式碼例項jQuery
- jQuery載入進度條例項程式碼jQuery
- jQuery 進度條效果程式碼jQuery
- jquery動態新增li元素程式碼例項jQuery
- css3實現的進度條程式碼例項CSSS3
- jquery動態設定元素的尺寸程式碼例項jQuery
- javascript百分比進度條效果程式碼例項JavaScript
- jquery動態設定為元素樣式程式碼例項jQuery
- css3 動態條紋邊框程式碼例項CSSS3
- canvas水位進度效果程式碼例項Canvas
- jQuery is() 程式碼例項jQuery
- jQuery動態載入更新外部樣式表程式碼例項jQuery
- 滑鼠懸浮底部具有動態延伸條效果程式碼例項
- 美化滾動條效果程式碼例項
- jQuery實現的動態載入指令碼檔案程式碼例項jQuery指令碼
- jQuery實現滑動門程式碼例項jQuery
- 計算瀏覽器垂直滾動條的寬度程式碼例項瀏覽器
- css隱藏滾動條程式碼例項CSS
- jQuery選項卡例項程式碼jQuery
- javascript動態建立元素程式碼例項JavaScript
- jquery實現的滑動門程式碼例項jQuery
- jQuery操作cookie程式碼例項jQueryCookie
- jQuery 動畫效果程式碼例項jQuery動畫
- jQuery事件冒泡程式碼例項jQuery事件
- jquery ui進度條 progressbarjQueryUI
- 動態載入javascript指令碼程式碼例項JavaScript指令碼
- js獲取滾動條高度例項程式碼JS
- jQuery實現的動態載入css和js檔案程式碼例項 [jQueryCSSJS
- js動態建立文字框程式碼例項JS
- js動態連結<a>元素程式碼例項JS
- js動態建立HTML元素程式碼例項JSHTML
- javascript動態操作table表格程式碼例項JavaScript
- C# 下載帶進度條程式碼(普通進度條)C#
- JavaScript 動態進度條效果詳解JavaScript
- 表格拖動滾動條標題固定程式碼例項
- 拖動滾動條載入資料程式碼例項
- jquery 驗證碼效果程式碼例項jQuery
- jquery實現的滑動軸效果程式碼例項jQuery