jquery 简单的进度条实现代码
更新时间：2010年03月11日 16:54:04 作者：
jquery其实是有个进度条插件的，叫做jqueryprogressbar.js，可是想练习一下，就没有用，自己写了点代码。这个代码其实是参考别人的，因为自己的JS基础不是很好。
其实我本来的计划是做网页设计师的，可是没有人认为我设计的好，哥到现在还没有工作，发泄一下，不多说了。
效果图
需要用到的图片：
背景图片：
进度显示图片：
网页结构：
复制代码 代码如下:
<div id="center">
<div id="message"></div>
<div id="loading"><div></div></div>
</div>
css代码：
代码
复制代码 代码如下:
#center{
margin:50px auto;
width:400px;
}
#loading{
width:397px;
height:49px;
background:url(bak.png) no-repeat;
}
#loading div{
width:0px;
height:48px;
background:url(pro.png) no-repeat;
color:#fff;
text-align:center;
font-family:Tahoma;
font-size:18px;
line-height:48px;
}
#message{
width:200px;
height:35px;
font-family:Tahoma;
font-size:12px;
background-color:#d8e7f0;
border:1px solid #187CBE;
display:none;
line-height:35px;
text-align:center;
margin-bottom:10px;
margin-left:50px;
JavaScript代码：
代码
复制代码 代码如下:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
var progress_id = "loading";
function SetProgress(progress) {
if (progress) {
$("#" + progress_id + " > div").css("width", String(progress) + "%"); //控制#loading div宽度
$("#" + progress_id + " > div").html(String(progress) + "%"); //显示百分比
}
}
var i = 0;
function doProgress() {
if (i > 100) {
$("#message").html("加载完毕！").fadeIn("slow");//加载完毕提示
return;
}
if (i <= 100) {
setTimeout("doProgress()", 100);
SetProgress(i);
i++;
}
}
$(document).ready(function() {
doProgress();
});
</script>
相关文章
这篇文章主要介绍了jQuery中remove()方法用法,以三个不同的实例形式分别演示了remove()方法删除元素的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
本篇文章主要介绍了jQuery鼠标悬停内容动画切换效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
这篇文章主要介绍了jQuery实现的简单手风琴效果,结合实例形式分析了jQuery基于事件响应、页面元素属性动态操作实现手风琴效果的方法,需要的朋友可以参考下2018-08-08
这两天的工作内容不多，基本是关于jquery中ajax的。之前一直都是写的最简单的ajax请求，并没关注怎么获取ajax返回值的问题。2015-08-08
之前本人的工作和学习多以原生js 为主，对jQuery 一直都不是很了解，但jQuery 作为当今最优秀的js 类库之一，必须是要花时间好好学习下的，今天正好蛋疼，读了里面一些代码2011-04-04
这篇文章主要介绍了jQuery表单对象属性过滤选择器,结合实例形式详细分析了jQuery针对表单元素进行属性过滤操作的具体实现技巧,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了JQuery控制Radio选中方法,涉及jQuery表单操作及鼠标事件响应的方法,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了jQuery xml字符串的解析、读取及查找方法,涉及jQuery方法针对xml字符串的解析、读取及遍历查询等操作相关技巧,需要的朋友可以参考下2016-03-03
这篇文章主要介绍了jQuery实现导航样式布局操作,可实现基于jQuery的用户自定义样式布局与属性动态操作相关技巧,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了jQuery中DOM节点的删除方法,文中介绍的很相信，内容包括empty()的基本用法、remove()的有参用法和无参用法、empty和remove区别、保留数据的删除操作detach()以及detach()和remove()区别，需要的朋友可以参考借鉴。2017-01-01
最新评论