一個(gè)簡(jiǎn)單的jquery進(jìn)度條示例
更新時(shí)間：2014年04月28日 09:23:24 作者：
這篇文章主要介紹了一個(gè)簡(jiǎn)單的jquery進(jìn)度條示例,需要的朋友可以參考下
用jQuery實(shí)現(xiàn)的最簡(jiǎn)單的進(jìn)度條，只有不到10行代碼。樣式可以直接忽略。（有一個(gè)圖片需要自己找一下）
[CSS]代碼
復(fù)制代碼 代碼如下:
$(function(){
var i=0;
(function progressBar(){
i=i+1;
if(i>=101){
i=0;
}
$("#proc").animate({width:i+"%"},500);
$("#progressWord").text(i+"%");
setTimeout(progressBar,1500);
})();
});
[CSS]代碼
復(fù)制代碼 代碼如下:
.progress_out{
position:relative;
border:1px solid #3c4d60;
-webkit-box-shadow: #666 0px 0px 3px;
-moz-box-shadow: #666 0px 0px 3px;
box-shadow: #666 0px 0px 3px;
width:200px;
height:40px;
}
.progress_inner{
background-color: #DADAE4;
width: 100%;
height: 40px;
}
.progress_word{
position:absolute;
left:50%;
top:24%;
font-weight: bold;
}
[HTML]代碼
復(fù)制代碼 代碼如下:
<div id="outDiv" class="progress_out">
<div id="progressbar" class="progress_inner">
<img id="proc" src="/cdr/images/resource/processBar.png" width=0 height=40px />
</div>
<div id="progressWord" class="progress_word">0%</div>
</div>
您可能感興趣的文章:
- Javascript jquery css 寫(xiě)的簡(jiǎn)單進(jìn)度條控件
- jQuery 頁(yè)面載入進(jìn)度條實(shí)現(xiàn)代碼
- jquery 簡(jiǎn)單的進(jìn)度條實(shí)現(xiàn)代碼
- Jquery進(jìn)度條插件 Progress Bar小問(wèn)題解決
- jQuery EasyUI API 中文文檔 - ProgressBar 進(jìn)度條
- 用jQuery模擬頁(yè)面加載進(jìn)度條的實(shí)現(xiàn)代碼
- 分享8款優(yōu)秀的 jQuery 加載動(dòng)畫(huà)和進(jìn)度條插件
- 6款新穎的jQuery和CSS3進(jìn)度條插件推薦
- 基于jQuery實(shí)現(xiàn)模擬頁(yè)面加載進(jìn)度條
- Jquery Uploadify多文件上傳帶進(jìn)度條且傳遞自己的參數(shù)
- Jquery Uploadify上傳帶進(jìn)度條的簡(jiǎn)單實(shí)例
- jQuery實(shí)現(xiàn)簡(jiǎn)單的文件上傳進(jìn)度條效果
相關(guān)文章
JQuery1.6 使用方法三，想要學(xué)習(xí)jquery的朋友可以參考下。2011-11-11
用jQuery與JSONP輕松解決跨域訪問(wèn)的問(wèn)題
本篇文章主要是對(duì)使用jQuery與JSONP輕松解決跨域訪問(wèn)的問(wèn)題進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
PHP結(jié)合jQuery實(shí)現(xiàn)紅藍(lán)投票功能特效
本文給大家分享的是jQuery + PHP+mysql完成的投票程序，功能不是太復(fù)雜，主要是效果非常不錯(cuò)，有需要的小伙伴可以參考下2015-07-07
這篇文章主要介紹了jQuery-each()方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
實(shí)例講解Jquery中隱藏hide、顯示show、切換toggle的用法
這篇文章主要介紹了實(shí)例講解Jquery中隱藏hide、顯示show、切換toggle的用法，感興趣的小伙伴們可以參考一下2016-05-05
當(dāng)我們遇到提交表單時(shí)，需要我們重復(fù)添加好幾個(gè)表單，在訂單表格中添加多個(gè)不同型號(hào)的產(chǎn)品信息。這個(gè)時(shí)候有復(fù)制表單表單按鈕，也就是新增一項(xiàng)，通過(guò)點(diǎn)擊復(fù)制按鈕來(lái)實(shí)現(xiàn)新增一項(xiàng)，怎么實(shí)現(xiàn)的呢？下面小編跟大家分享，需要的朋友的朋友可以參考下2015-09-09
我們有時(shí)使用jQuery新加元素后，會(huì)出現(xiàn)新元素不會(huì)執(zhí)行一部分原有的事件函數(shù)。本文主要介紹了jQuery解決添加元素后不執(zhí)行原有事件的方法，感興趣的同學(xué)可以了解一下2021-11-11
這篇文章主要介紹了jquery中change()用法,實(shí)例分析了change的功能、定義及具體的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
如何使用jquery修改css中帶有!important的樣式屬性
如何使用jquery修改css中帶有!important的樣式屬性？下面小編就為大家?guī)?lái)一篇使用jquery修改css中帶有!important的樣式屬性方法。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2016-04-04
jQuery實(shí)現(xiàn)帶有動(dòng)畫(huà)效果的回到頂部和底部代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶有動(dòng)畫(huà)效果的回到頂部和底部代碼,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11