javascript 进度条的几种方法

我们先看看最终效果：

第一步，基本
构建基本的代码，看效果演示：
</p> <p><title>制作<a href="https://kunjuke.com/tag/1060/" title="进度条" target="_blank">进度条</a>的两种方法</title> </p> <p>*{<br /> margin:0;<br /> padding:0;<br /> }<br /> body{font-size:12px;}h1{font-size:15px;}<br /> .wrap{<br /> font-size: 12px;<br /> margin:40px auto;<br /> width:400px;<br /> }<br /> /*进度条样式*/<br /> .progressbar_1{<br /> background-color:#eee;<br /> height:16px;<br /> width:150px;<br /> border:1px solid #bbb;<br /> color:#222;<br /> }<br /> .progressbar_1 .bar {<br /> background-color:#6CAF00;<br /> height:16px;<br /> width:0;<br /> } </p> <h1>1，构建基本的HTML结构和CSS样式</h1> <p> 0%的状态： </p> <p> 50%的状态： </p> <p> 80%的状态： </p> <p> 100%的状态： </p> <p> 这步非常简单，相信大家都能看明白。 </p> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
第二步，给进度条增加文字显示
</p> <p><title>制作进度条的两种方法</title> </p> <p>*{<br /> margin:0;<br /> padding:0;<br /> }<br /> body{font-size:12px;}h1{font-size:15px;}<br /> .wrap{<br /> font-size: 12px;<br /> margin:40px auto;<br /> width:400px;<br /> }<br /> /*进度条样式*/<br /> .progressbar_1{<br /> background-color:#eee;<br /> color:#222;<br /> height:16px;<br /> width:150px;<br /> border:1px solid #bbb;<br /> }<br /> .progressbar_1 .bar {<br /> background-color:#6CAF00;<br /> height:16px;<br /> width:0;<br /> }<br /> /*绝对定位*/<br /> .progressbar_2{<br /> background-color:#eee;<br /> color:#222;<br /> height:16px;<br /> width:150px;<br /> border:1px solid #bbb;<br /> text-align:center;<br /> position:relative;<br /> }<br /> .progressbar_2 .bar {<br /> background-color:#6CAF00;<br /> height:16px;<br /> width:0;<br /> position:absolute;<br /> left:0;<br /> top:0;<br /> }<br /> .progressbar_2 .text {<br /> height:16px;<br /> position:absolute;<br /> left:0;<br /> top:0;<br /> width:100%;<br /> line-height:16px;<br /> }<br /> /*绝对定位 + z-index */<br /> .progressbar_3{<br /> background-color:#eee;<br /> color:#222;<br /> height:16px;<br /> width:150px;<br /> border:1px solid #bbb;<br /> text-align:center;<br /> position:relative;<br /> }<br /> .progressbar_3 .bar {<br /> background-color:#6CAF00;<br /> height:16px;<br /> width:0;<br /> position:absolute;<br /> left:0;<br /> top:0;<br /> z-index:10;<br /> }<br /> .progressbar_3 .text {<br /> height:16px;<br /> position:absolute;<br /> left:0;<br /> top:0;<br /> width:100%;<br /> line-height:16px; </p> <p> z-index:100;<br /> } </p> <h1>2，给进度条增加文字显示</h1> <p> 一个进度条需要包含对应的进度文字显示，本例中，我希望文字显示在进度条的中间。<br /> 接下来，我们在进度条元素内增加一个显示 文字的div。 </p> <p> 很显然，直接添加div后，div会占据原先绿色进度条的位置。看下面例子：</p> <p> 50% </p> <p> 那么有什么办法使得文字 和 绿色进度条 同时显示在 一起呢？ </p> <p> 估计你也想到了，那就是绝对定位。通过对父元素添加相对定位，然后给子元素添加绝对定位，设置子元素的左边距和上边距都为0。 </p> <p> 看下面的例子： </p> <p> 50% </p> <p> 这时你会发现文字被遮盖了，相信你第一时间就会想到用 z-index 去设置他们的层级关系。</p> <p> 对，我也选择的是它。通过给他们设置不同的z-index值来确定层级关系，值越大越显示在上面。看下面例子：</p> <p> 50% </p> <p> 80% </p> <p> 100% </p> <p> 这是第一种方式，也是目前最为流行的 制作进度条的方式。</p> <p> 他的原理就是采用 相对定位和绝对定位，然后通过背景不同来控制进度。<br /> 接下来我们看第二种方式制作进度条。</p> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
他的原理就是采用 相对定位和绝对定位，然后通过背景不同来控制进度。 接下来我们看第二种方式制作进度条。
第三步，制作进度条的第二种方式---直接使用图片+背景图片
</p> <p><title></title> </p> <p>*{<br /> margin:0;<br /> padding:0;<br /> }<br /> body{font-size:12px;}h1{font-size:15px;}<br /> .wrap{<br /> font-size: 12px;<br /> margin:40px auto;<br /> width:400px;<br /> }<br /> /*不带文字*/<br /> .progress{<br /> border:0;<br /> width: 152px;<br /> height: 18px;<br /> background:url(img/progress.gif) no-repeat -100px 50%;<br /> }<br /> /*带文字显示*/<br /> .progressbar_3{<br /> width:152px;<br /> position:relative;<br /> height:18px;<br /> text-align:center;<br /> position:relative;<br /> color:#222;<br /> }<br /> .progressbar_3 .text{<br /> width:152px;<br /> position:absolute;<br /> left:0;<br /> top:0;<br /> height:18px;<br /> line-height:18px;<br /> z-index:100;<br /> }<br /> .progressbar_3 .progress{<br /> width:152px;<br /> position:absolute;<br /> left:0;<br /> top:0;<br /> height:18px;<br /> z-index:10;<br /> } </p> <h1>3，制作进度条的第二种方式---直接使用图片+背景图片</h1> <p> 如果你想在上面进度条上添加进度显示的文字，你应该知道怎么办了（如果你仔细阅读过前面的例子的话）。</p> <p> 对，就是使用绝对定位+相对定位来控制。 </p> <p> 0% </p> <p> 20% </p> <p> 50% </p> <p> 80% </p> <p> 100% </p> <p> 这种方式的原理就是 利用 一张img图片，然后给img图片又设置背景图，通过背景图的background position 属性 来显示不同的部分。</p> <p> 当然这种方式 对图片有点要求 。你仔细一点就会发现，宽度是img的2倍。</p> <p> 另外图片必须是gif透明的，也就是说空心的。呵呵。看不到进度条。</p> <p> 总的来说，这应该算一个技巧，在实际项目中，也是能使用的。</p> <p style="float:right">Dev By jb51.net</p> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
这种方式的原理就是 利用 一张img图片，然后给img图片又设置背景图，通过背景图的background position 属性 来显示不同的部分。
当然这种方式 对图片有点要求 。你仔细一点就会发现，宽度是img的2倍。
另外图片必须是gif透明的，也就是说空心的。呵呵。看不到进度条。例子中background-position是用的px值，实际可以采用 % 来控制 更精确， 比如: background-position:80% 50%;等。
总的来说，这应该算一个技巧，在实际项目中，也是能使用的。

第四步，应用
最后我们看一个简单的应用：
</p> <p><title></title> </p> <p>*{<br /> margin:0;<br /> padding:0;<br /> }<br /> body{font-size:12px;}h1{font-size:15px;}<br /> .wrap{<br /> font-size: 12px;<br /> margin:40px auto;<br /> width:400px;<br /> } </p> <p>/*不带文字*/<br /> .progress{<br /> border:0;<br /> width: 152px;<br /> height: 18px;<br /> background:url(img/progress.gif) no-repeat -100px 50%;<br /> }<br /> /*带文字显示*/<br /> .progressbar_3{<br /> width:152px;<br /> position:relative;<br /> height:18px;<br /> text-align:center;<br /> position:relative;<br /> color:#222;<br /> }<br /> .progressbar_3 .text{<br /> width:152px;<br /> position:absolute;<br /> left:0;<br /> top:0;<br /> height:18px;<br /> line-height:18px;<br /> z-index:100;<br /> }<br /> .progressbar_3 .progress{<br /> width:152px;<br /> position:absolute;<br /> left:0;<br /> top:0;<br /> height:18px;<br /> z-index:10;<br /> } </p> <h1>4，应用</h1> <p> 0% </p> <p> <button id="addTo">增加至50%</button><br /> <button id="cutdown">减少至20%</button> </p> <p> 我使用的是第二种方式来做控制，通过animate来控制图片的background-position来达到进度条效果。</p> <p> 当然你也可以使用第一种方式做，第一种方式需要改变的是进度条的 width 属性。 </p> <p style="float:right">Dev By jb51.net</p> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
通过animate来控制图片的background-position来达到进度条效果。
当然你也可以使用第一种方式做，第一种方式需要改变的是进度条的 width 属性。
文件打包下载

您可能感兴趣的文章:

• js实现可拖动DIV的方法
• html+javascript实现可拖动可提交的弹出层对话框效果
• javascript之可拖动的iframe效果代码
• js 可拖动列表实现代码
• JS+CSS实现可拖动的弹出提示框
• 原生JS可拖动弹窗效果实例代码
• javascript实现dom元素可拖动
• JavaScript实现网页加载进度条代码超简单
• JS 进度条效果实现代码整理
• JS实现环形进度条（从0到100%）效果
• JavaScript实现水平进度条拖拽效果
• 原生js实现的移动端可拖动进度条插件功能详解