javascript 进度条的几种方法- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 进度条的几种方法

Javascript: 自己开发Dojo的建议框架; js每次Title显示不同的名言; 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术; 无限级别的菜单（侧拉菜单）; 点选TOP后并不是直接跳到页顶的，而是滚动上去; js下拉菜单中自动信息轮换播放; 英文首字母全大写的js实现脚本; 实例区别onClick和onDBClick两事件方法; 改变文本框字体颜色的js脚本; js星空效果代码; 判断li是否有样式的js代码; 文本框点击时文字消失，失去焦点时文字出现; 如何让一个层关闭之后，就算刷新页面了也不显示。除非关闭页面再次打开; 右下角弹出窗口效果代码; JS控制对象移动效果; 验证用户是否修改过页面的数据的实现方法; Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]; 正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度; EXT富客户端后台管理系统初步代码; 不同浏览器javascript变量作用域的处理方法

No. « ‹ 110 111 112 113 › »

技术文章搜索

关键字

Javascript 中的 javascript 进度条的几种方法

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 415 ::

收藏到网摘: n/a

Jquery 基础学习笔记 Jquery中的offset()和position()深入剖析

在实际项目中，进度条的用处还是非常大的。这篇文章主要是要介绍几种制作进度条的方法。通过学习，你也能制作属于自己的进度条了。我们先看看最终效果：

第一步，基本
构建基本的代码，看效果演示：

点击运行可以看到效果:

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

第二步，给进度条增加文字显示

点击运行可以看到效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>制作进度条的两种方法</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
*{ margin:0; padding:0;
}
body{font-size:12px;}h1{font-size:15px;}
.wrap{ font-size: 12px; margin:40px auto; width:400px;
}
/*进度条样式*/
.progressbar_1{ background-color:#eee; color:#222; height:16px; width:150px; border:1px solid #bbb;
}
.progressbar_1 .bar { background-color:#6CAF00; height:16px; width:0;
}
/*绝对定位*/
.progressbar_2{ background-color:#eee; color:#222; height:16px; width:150px; border:1px solid #bbb; text-align:center; position:relative;
}
.progressbar_2 .bar { background-color:#6CAF00; height:16px; width:0; position:absolute; left:0; top:0;
}
.progressbar_2 .text { height:16px; position:absolute; left:0; top:0; width:100%; line-height:16px;
}
/*绝对定位 + z-index */
.progressbar_3{ background-color:#eee; color:#222; height:16px; width:150px; border:1px solid #bbb; text-align:center; position:relative;
}
.progressbar_3 .bar { background-color:#6CAF00; height:16px; width:0; position:absolute; left:0; top:0; z-index:10;
}
.progressbar_3 .text { height:16px; position:absolute; left:0; top:0; width:100%; line-height:16px; z-index:100;
}
</style>
</head>
<body>
<div class="wrap"> <h1>2，给进度条增加文字显示</h1> 一个进度条需要包含对应的进度文字显示，本例中，我希望文字显示在进度条的中间。 接下来，我们在进度条元素内增加一个显示 文字的div。 很显然，直接添加div后，div会占据原先绿色进度条的位置。看下面例子： <div class="progressbar_1"> <div >50%</div> <div class="bar" style="width: 50%;"></div> </div> 那么有什么办法使得文字 和 绿色进度条 同时显示在 一起呢？ 估计你也想到了，那就是绝对定位。通过对父元素添加相对定位，然后给子元素添加绝对定位，设置子元素的左边距和上边距都为0。 看下面的例子： <div class="progressbar_2"> <div class="text">50%</div> <div class="bar" style="width: 50%;"></div> </div> 这时你会发现文字被遮盖了，相信你第一时间就会想到用 z-index 去设置他们的层级关系。 对，我也选择的是它。通过给他们设置不同的z-index值来确定层级关系，值越大越显示在上面。看下面例子： <div class="progressbar_3"> <div class="text">50%</div> <div class="bar" style="width: 50%;"></div> </div> <div class="progressbar_3"> <div class="text">80%</div> <div class="bar" style="width: 80%;"></div> </div> <div class="progressbar_3"> <div class="text">100%</div> <div class="bar" style="width: 100%;"></div> </div> 这是第一种方式，也是目前最为流行的 制作进度条的方式。 他的原理就是采用 相对定位和绝对定位，然后通过背景不同来控制进度。 接下来我们看第二种方式制作进度条。
</div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

他的原理就是采用相对定位和绝对定位，然后通过背景不同来控制进度。接下来我们看第二种方式制作进度条。
第三步，制作进度条的第二种方式---直接使用图片+背景图片

点击运行可以看到效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
*{ margin:0; padding:0;
}
body{font-size:12px;}h1{font-size:15px;}
.wrap{ font-size: 12px; margin:40px auto; width:400px;
}
/*不带文字*/
.progress{ border:0; width: 152px; height: 18px; background:url(img/progress.gif) no-repeat -100px 50%;
}
/*带文字显示*/
.progressbar_3{ width:152px; position:relative; height:18px; text-align:center; position:relative; color:#222;
}
.progressbar_3 .text{ width:152px; position:absolute; left:0; top:0; height:18px; line-height:18px; z-index:100;
}
.progressbar_3 .progress{ width:152px; position:absolute; left:0; top:0; height:18px; z-index:10;
}
</style>
</head>
<body>
<div class="wrap"> <h1>3，制作进度条的第二种方式---直接使用图片+背景图片</h1> <img class="progress" width="152" height="18" title="0%" alt="0%" src="img/bg.gif" style="background-position:-152px 50%;"/> <img class="progress" width="152" height="18" title="20%" alt="20%" src="img/bg.gif" style="background-position:-120px 50%;"/> <img class="progress" width="152" height="18" title="50%" alt="50%" src="img/bg.gif" style="background-position:-76px 50%;"/> <img class="progress" width="152" height="18" title="80%" alt="80%" src="img/bg.gif" style="background-position:-30px 50%;"/> <img class="progress" width="152" height="18" title="100%" alt="100%" src="img/bg.gif" style="background-position: 0 50%;"/> 如果你想在上面进度条上添加进度显示的文字，你应该知道怎么办了（如果你仔细阅读过前面的例子的话）。 对，就是使用绝对定位+相对定位来控制。 <div class="progressbar_3"> <div class="text">0%</div> <img class="progress" width="152" height="18" title="0%" alt="0%" src="img/bg.gif" style="background-position:-152px 50%;"/> </div> <div class="progressbar_3"> <div class="text">20%</div> <img class="progress" width="152" height="18" title="20%" alt="20%" src="img/bg.gif" style="background-position:-120px 50%;"/> </div> <div class="progressbar_3"> <div class="text">50%</div> <img class="progress" width="152" height="18" title="50%" alt="50%" src="img/bg.gif" style="background-position:-76px 50%;"/> </div> <div class="progressbar_3"> <div class="text">80%</div> <img class="progress" width="152" height="18" title="80%" alt="80%" src="img/bg.gif" style="background-position:-30px 50%;"/> </div> <div class="progressbar_3"> <div class="text">100%</div> <img class="progress" width="152" height="18" title="100%" alt="100%" src="img/bg.gif" style="background-position: 0 50%;"/> </div> 这种方式的原理就是 利用 一张img图片，然后给img图片又设置背景图，通过背景图的background position 属性 来显示不同的部分。 当然这种方式 对图片有点要求 。你仔细一点就会发现，宽度是img的2倍。 另外图片必须是gif透明的，也就是说空心的。呵呵。看不到进度条。 总的来说，这应该算一个技巧，在实际项目中，也是能使用的。 <p style="float:right;">Dev By <a href="http://www.ruanchen.com" style="color: #000">ruanchen.com</a>
</div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

这种方式的原理就是利用一张img图片，然后给img图片又设置背景图，通过背景图的background position 属性来显示不同的部分。
当然这种方式对图片有点要求。你仔细一点就会发现，宽度是img的2倍。
另外图片必须是gif透明的，也就是说空心的。呵呵。看不到进度条。例子中background-position是用的px值，实际可以采用 % 来控制更精确，比如: background-position:80% 50%;等。
总的来说，这应该算一个技巧，在实际项目中，也是能使用的。
第四步，应用
最后我们看一个简单的应用：

点击运行可以看到效果:

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

通过animate来控制图片的background-position来达到进度条效果。
当然你也可以使用第一种方式做，第一种方式需要改变的是进度条的 width 属性。
文件打包下载

Jquery 基础学习笔记 Jquery中的offset()和position()深入剖析

Javascript 中的 javascript 进度条的几种方法

评论 (0) All