javascript 进度条的几种方法

我们先看看最终效果：

[url=169]169[/url]

第一步，基本
构建基本的代码，看效果演示：<!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{

height:16px;
width:150px;
border:1px solid #bbb;
color:#222;
}
.progressbar_1 .bar {

height:16px;
width:0;
}
</style>
</head>
<body>
<div class="wrap">
<h1>1，构建基本的HTML结构和CSS样式</h1>

0%的状态：
<div class="progressbar_1">
<div class="bar"></div>
</div>

50%的状态：
<div class="progressbar_1">
<div class="bar" style="width: 50%;"></div>
</div>

80%的状态：
<div class="progressbar_1">
<div class="bar" style="width: 80%;"></div>
</div>

100%的状态：
<div class="progressbar_1">
<div class="bar" style="width: 100%;"></div>
</div>
这步非常简单，相信大家都能看明白。
</div>
</body>
</html>

第二步，给进度条增加文字显示
<!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{

color:#222;
height:16px;
width:150px;
border:1px solid #bbb;
}
.progressbar_1 .bar {

height:16px;
width:0;
}
/*绝对定位*/
.progressbar_2{

color:#222;
height:16px;
width:150px;
border:1px solid #bbb;
text-align:center;
position:relative;
}
.progressbar_2 .bar {

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{

color:#222;
height:16px;
width:150px;
border:1px solid #bbb;
text-align:center;
position:relative;
}
.progressbar_3 .bar {

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会占据原先绿色进度条的位置。看下面例子：

那么有什么办法使得文字和绿色进度条同时显示在一起呢？

估计你也想到了，那就是绝对定位。通过对父元素添加相对定位，然后给子元素添加绝对定位，设置子元素的左边距和上边距都为0。

看下面的例子：

这时你会发现文字被遮盖了，相信你第一时间就会想到用 z-index 去设置他们的层级关系。

对，我也选择的是它。通过给他们设置不同的z-index值来确定层级关系，值越大越显示在上面。看下面例子：

这是第一种方式，也是目前最为流行的制作进度条的方式。
他的原理就是采用相对定位和绝对定位，然后通过背景不同来控制进度。
接下来我们看第二种方式制作进度条。
</div>
</body>
</html>
他的原理就是采用相对定位和绝对定位，然后通过背景不同来控制进度。接下来我们看第二种方式制作进度条。
第三步，制作进度条的第二种方式---直接使用图片+背景图片
<!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>

如果你想在上面进度条上添加进度显示的文字，你应该知道怎么办了（如果你仔细阅读过前面的例子的话）。

对，就是使用绝对定位+相对定位来控制。

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

/*不带文字*/
.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>

$("#addTo").click(function(){
      $progress.animate({"backgroundPosition":"-76px 50%"},500,function(){
         $(this).attr({"alt":"50%","title":"50%"});
         $txt.text("50%");
         $("<p>进度条加载完毕!</p>").appendTo(".wrap");
      });
});
$("#cutdown").click(function(){
      $progress.animate({"backgroundPosition":"-120px 50%"},500,function(){
         $(this).attr({"alt":"20%","title":"20%"});
         $txt.text("20%");
         $("<p>进度条加载完毕!</p>").appendTo(".wrap");
      });
});
});
</script>
</head>
<body>
<div class="wrap">
<h1>4，应用</h1>

我使用的是第二种方式来做控制，通过animate来控制图片的background-position来达到进度条效果。
当然你也可以使用第一种方式做，第一种方式需要改变的是进度条的 width 属性。
<p style="float:right;">Dev By <a href="http://www.huiyi8.com" >huiyi8素材</a></p>
</div>
</body>
</html>
通过animate来控制图片的background-position来达到进度条效果。
当然你也可以使用第一种方式做，第一种方式需要改变的是进度条的 width 属性。

源于：http://www.huiyi8.com/sc/24044.html

转载于:https://www.cnblogs.com/lhrs/p/4097342.html

javascript 进度条的几种方法相关推荐

组态王怎么做进度条_三种方法制作进度条效果
进度条可以说出现在我们生活的方方面面,游戏.视频加载会碰到它,刷新会碰到它,就连网络不顺畅时也会碰到它.进度条不仅仅只是作为信息载入时的标志,还可以运用到片头开场,让观众对接下来的视频内容产生好奇和期 ...
CAD进度条设置3种方法
一.ProgressMeter类通过使用Autodesk.AutoCAD.Runtime命名空间中的ProgressMeter来显示,需要添加对acdbdmgd.dll.acmgd.dll.DotN ...
css圆环进度条的几种方法
方法一: 用H5自带的canvas画圆环 <!DOCTYPE html> <html lang="en"> <head><meta cha ...
python中实现进度条的四种方法
文章目录 (一): python程序中使用time模块可以让程序休眠 timesleep(t) 参数t是推迟执行的秒数 import time for i in range(0, 101, 2):ti ...
Python实现进度条的5种方式
转载自:https://blog.csdn.net/qq_36853469/article/details/103925626 这里只列举了部分方法,其他方法或python库暂时还没使用到 1.不用库 ...
JavaScript 获得对象的N种方法 [转]
JavaScript 获得对象的N种方法 [转] 方法如下: document.getElementById(ID) //获得指定ID值的对象 document.getElementsB ...
JavaScript 数组遍历的五种方法（转）
转自:JavaScript 数组遍历的五种方法这篇文章主要介绍了JavaScript 数组遍历的五种方法,帮助大家更好的理解和学习使用JavaScript,感兴趣的朋友可以了解下在使用 JavaS ...
javascript进度条（js实例）
利用javascript模拟下载进度条,可以防止重复点击. 思路:用两个div嵌套,开始时,初始时里面的div宽度为0,当点击下载时,让里面的div宽度一直+1,当加到100时停止.完成下载! < ...
JavaScript数组去重的五种方法
JavaScript数组去重的五种方法先简单准备一个数组,用于方法的实验: let array = [1,1,2,3,4,4,1,5,6,6,7,7,7]; console.log(`去重前的数组: ...

javascript 进度条的几种方法

javascript 进度条的几种方法相关推荐

最新文章

热门文章