jquery實現(xiàn)模擬百分比進度條漸變效果代碼

更新時間：2015年10月29日 10:39:48 作者：企鵝

這篇文章主要介紹了jquery實現(xiàn)模擬百分比進度條漸變效果代碼,涉及jQuery基于時間函數操作頁面元素樣式變換的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了jquery實現(xiàn)模擬百分比進度條漸變效果代碼。分享給大家供大家參考，具體如下：

這里為了便于看到加載百分比，對代碼進行了處理，實際使用時并不需要這樣。

運行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/jquery-mn-bfb-scroll-cha-style-demo/

具體代碼如下：

<html>
<head>
<title>jquery模擬百分比進度條</title>
<script type='text/javascript' src='jquery1.3.2.js'></script>
<style>
#loading{ background:url(bak.png) 0 0 no-repeat; width:397px; height:49px;}
#loading div{ background:url(pro.png) 0 0 no-repeat; line-height:49px;height:49px; text-align:right;}
</style>
<script type="text/javascript">
var progress_id ="loading";
function SetProgress(progress) {
if (progress) {
$("#" + progress_id +" > div").css("width",String(progress) + "%"); //控制#loading div寬度
$("#" + progress_id +"> div").html(String(progress) + "%"); //顯示百分比
}
}
var i = 0;
function doProgress() {
if (i > 100) {
$("#message").html("恭喜您，歌曲上傳成功！").fadeIn("slow");//加載完畢提示
return;
}
if (i <= 100) {
setTimeout("doProgress()",500);
SetProgress(i);
i++;
}
}
$(document).ready(function() {
doProgress();
});
</script>
</head>
<body>
<div id="message"></div>
<div id="loading"><div>
</body>
</html>

希望本文所述對大家jQuery程序設計有所幫助。

您可能感興趣的文章:

jQuery animate(滑塊滑動效果代碼)
jQuery animate 滑塊滑動效果,學習jquery的朋友可以看下。
2010-01-01
jquery實現(xiàn)倒計時代碼分享
最近做的項目，需要倒計時，翻了翻資料，寫了出來，分享給大家，歡迎拍磚，jquery庫自己記得引用哈
2014-06-06
jQuery手指滑動輪播效果
本文給大家分享一段jquery代碼實現(xiàn)手指滑動輪播效果，代碼簡單易懂，非常不錯，需要的朋友參考下
2016-12-12
jQuery實現(xiàn)的簡單拖動層示例
這篇文章主要介紹了jQuery實現(xiàn)的簡單拖動層,可實現(xiàn)響應鼠標拖動div層及動態(tài)顯示坐標值的功能,涉及jQuery鼠標響應及頁面元素屬性相關操作技巧,需要的朋友可以參考下
2017-02-02
基于jQuery實現(xiàn)多層次的手風琴效果附源碼
今天我們要與大家分享一個漂亮而靈活的垂直 jQuery 手風琴效果。其主要思想是擴大手風琴片上的點擊和顯示更多的信息。感興趣的朋友可以參考下本文
2015-09-09
Jquery iframe內部出滾動條
Jquery 操作頁面中iframe自動跟隨窗口大小變化，而不出現(xiàn)滾動條，只在iframe內部出滾動條
2010-02-02
jQuery選中select控件無法設置selected的解決方法
select 控件的 option用jQuery動態(tài)添加，然后選中某項時，IE6不能執(zhí)行（火狐沒問題），用try{}catch(err){alert(err.description);}提示為“無法設置selected屬性未指明的錯誤”
2010-09-09
使用jquery給input和textarea設定ie中的focus
在瀏覽網站的過程中，我們經常可以看見當鼠標點擊后樣式改變的文本框和文本域,那么這種效果是如何實現(xiàn)的呢?
2008-05-05
引用jquery框架后出錯的解決方法
下面小編就為大家?guī)硪黄胘query框架后出錯的解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
Jquery輪播效果實現(xiàn)過程解析
這篇文章主要為大家詳細的分析了Jquery輪播效果實現(xiàn)過程的具體步驟以及實現(xiàn)思路，幫助大家快速實現(xiàn)Jquery輪播效果，感興趣的小伙伴們可以參考一下
2016-03-03