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