一个简单的jquery进度条示例
更新时间：2014年04月28日 09:23:24 作者：
这篇文章主要介绍了一个简单的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>
您可能感兴趣的文章:
- Javascript jquery css 写的简单进度条控件
- jQuery 页面载入进度条实现代码
- jquery 简单的进度条实现代码
- Jquery进度条插件 Progress Bar小问题解决
- jQuery EasyUI API 中文文档 - ProgressBar 进度条
- 用jQuery模拟页面加载进度条的实现代码
- 分享8款优秀的 jQuery 加载动画和进度条插件
- 6款新颖的jQuery和CSS3进度条插件推荐
- 基于jQuery实现模拟页面加载进度条
- Jquery Uploadify多文件上传带进度条且传递自己的参数
- Jquery Uploadify上传带进度条的简单实例
- jQuery实现简单的文件上传进度条效果
相关文章
JQuery1.6 使用方法三，想要学习jquery的朋友可以参考下。2011-11-11
本篇文章主要是对使用jQuery与JSONP轻松解决跨域访问的问题进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
本文给大家分享的是jQuery + PHP+mysql完成的投票程序，功能不是太复杂，主要是效果非常不错，有需要的小伙伴可以参考下2015-07-07
这篇文章主要介绍了jQuery-each()方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
这篇文章主要介绍了实例讲解Jquery中隐藏hide、显示show、切换toggle的用法，感兴趣的小伙伴们可以参考一下2016-05-05
当我们遇到提交表单时，需要我们重复添加好几个表单，在订单表格中添加多个不同型号的产品信息。这个时候有复制表单表单按钮，也就是新增一项，通过点击复制按钮来实现新增一项，怎么实现的呢？下面小编跟大家分享，需要的朋友的朋友可以参考下2015-09-09
我们有时使用jQuery新加元素后，会出现新元素不会执行一部分原有的事件函数。本文主要介绍了jQuery解决添加元素后不执行原有事件的方法，感兴趣的同学可以了解一下2021-11-11
这篇文章主要介绍了jquery中change()用法,实例分析了change的功能、定义及具体的使用技巧,非常具有实用价值,需要的朋友可以参考下2015-02-02
如何使用jquery修改css中带有!important的样式属性
如何使用jquery修改css中带有!important的样式属性？下面小编就为大家带来一篇使用jquery修改css中带有!important的样式属性方法。希望对大家有所帮助。一起跟随小编过来看看吧2016-04-04
这篇文章主要介绍了jQuery实现带有动画效果的回到顶部和底部代码,涉及jQuery响应鼠标事件动态操作页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
最新评论