欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一個(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>

相關(guān)文章

最新評(píng)論