手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >一个简单的jquery进度条示例
一个简单的jquery进度条示例
摘要:用jQuery实现的最简单的进度条,只有不到10行代码。样式可以直接忽略。(有一个图片需要自己找一下)[CSS]代码复制代码代码如下:$(f...

用jQuery实现的最简单的进度条,只有不到10行代码。样式可以直接忽略。(有一个图片需要自己找一下)

一个简单的jquery进度条示例1

[CSS]代码

复制代码 代码如下:

$(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]代码

复制代码 代码如下:

.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]代码

复制代码 代码如下:

<div id="outDiv">

<div id="progressbar">

<img id="proc" src="http://www.jb51.netcdr/images/resource/processBar.png" width=0 height=40px />

</div>

<div id="progressWord">0%</div>

</div>

【一个简单的jquery进度条示例】相关文章:

JavaScript中Number.MIN_VALUE属性的使用示例

全面详细的jQuery常见开发技巧手册

jquery实现弹出层效果实例

简单介绍JavaScript的变量和数据类型

表单的一些基本用法与技巧

jQuery+ajax实现无刷新级联菜单示例

打造个性化的Select(可编辑)

7个有用的jQuery代码片段分享

一个特帅的展示图片的js+css

图片加载进度实时显示

精品推荐
分类导航