一个简单的jquery进度条示例


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



[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" 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>



相关阅读:
Android中自定义加载样式图片的具体实现
升级到Win10正式版后不能玩DNF如何解决?
CodeIgniter连贯操作的底层原理分析
C#将文件复制到指定文件夹并整理
php微信浏览器分享设置以及回调详解
Oracle数据库中创建自增主键的实例教程
服务器不支持 MySql 数据库的解决方法
win10文件的默认打开方式如何设置?
IOS程序开发之跳转短信发送界面实现发送短信功能
win7系统无法删除桌面ie图标的解决方法
如何防止回车(enter)键提交表单
jQuery学习笔记之jQuery中的$
iOS中的通知机制
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
快速导航

Copyright © 2016 phpStudy |