快捷導(dǎo)航

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

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

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

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

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

運(yùn)行效果截圖如下：

在線演示地址如下：

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

具體代碼如下：

<html>
<head>
<title>jquery模擬百分比進(jìn)度條</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>

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

您可能感興趣的文章:

相關(guān)文章

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