php进度条实例,JavaScript_一个简单的jquery进度条示例，用jQuery实现的最简单的进度条 - phpStudy...

一个简单的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]代码

 

0%

相关阅读:

Android中自定义加载样式图片的具体实现

升级到Win10正式版后不能玩DNF如何解决?

CodeIgniter连贯操作的底层原理分析

C#将文件复制到指定文件夹并整理

php微信浏览器分享设置以及回调详解

Oracle数据库中创建自增主键的实例教程

服务器不支持 MySql 数据库的解决方法

win10文件的默认打开方式如何设置?

IOS程序开发之跳转短信发送界面实现发送短信功能

win7系统无法删除桌面ie图标的解决方法

如何防止回车(enter)键提交表单

jQuery学习笔记之jQuery中的$

iOS中的通知机制

推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)