Maison > Article > interface Web > Introduction à plusieurs méthodes d'implémentation des barres de progression en JavaScript
Introduction à plusieurs méthodes d'implémentation des barres de progression en JavaScript
- 黄舟original
- 2017-11-21 09:54:038423parcourir
Dans notre article précédent, nous vous avons présenté des exemples d'implémentation JavaScript des barres de progression. Nous savons tous que dans les projets réels, les barres de progression sont toujours très utiles. Aujourd'hui, nous allons continuer à présenter les avantages de l'implémentation JavaScript des barres de progression. De quelles manières !
Jetons d'abord un coup d'œil à l'effet final :
La première étape, essentiellement
Construisez le code de base et voir la démonstration de l'effet :
<!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;
height:16px;
width:150px;
border:1px solid #bbb;
color:#222;
}
.progressbar_1 .bar {
background-color:#6CAF00;
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>La deuxième étape consiste à ajouter l'affichage du texte à la barre de progression
<!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> Son principe est d'utiliser le positionnement relatif et le positionnement absolu, puis de contrôler la progression à travers différents arrière-plans. Nous examinons ensuite la deuxième façon de créer une barre de progression.
La troisième étape, la deuxième façon de créer une barre de progression --- utiliser directement des images + des images d'arrière-plan
<!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" style="max-width:90%" title="0%" alt="0%" src="img/bg.gif" style="background-position:-152px 50%;"/>
<img class="progress" width="152" style="max-width:90%" title="20%" alt="20%" src="img/bg.gif" style="background-position:-120px 50%;"/>
<img class="progress" width="152" style="max-width:90%" title="50%" alt="50%" src="img/bg.gif" style="background-position:-76px 50%;"/>
<img class="progress" width="152" style="max-width:90%" title="80%" alt="80%" src="img/bg.gif" style="background-position:-30px 50%;"/>
<img class="progress" width="152" style="max-width:90%" 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" style="max-width:90%" 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" style="max-width:90%" 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" style="max-width:90%" 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" style="max-width:90%" 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" style="max-width:90%" 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.jb51.net" >jb51.net</a></p>
</div>
</body>
</html>La quatrième étape, appliquer
Enfin, regardons une application simple :
<!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>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript" language="javascript" charset="gb2312"></script>
<script>
$(function(){
var $txt = $(".progressbar_3 .text");
var $progress = $(".progressbar_3 .progress");
$("#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>
<div class="progressbar_3">
<div class="text">0%</div>
<img class="progress" width="152" style="max-width:90%" title="0%" alt="0%" src="img/bg.gif" style="background-position:-152px 50%;"/>
</div>
<button id="addTo" >增加至50%</button>
<button id="cutdown" >减少至20%</button>
我使用的是第二种方式来做控制，通过animate来控制图片的background-position来达到进度条效果。
当然你也可以使用第一种方式做，第一种方式需要改变的是进度条的 width 属性。
<p style="float:right;">Dev By <a href="http://www.jb51.net" >jb51.net</a></p>
</div>
</body>
</html>Utilisez Animate pour contrôler la position d'arrière-plan de l'image afin d'obtenir l'effet de barre de progression. .
Bien sûr, vous pouvez également utiliser la première méthode. Ce qui doit être modifié dans la première méthode, c'est l'attribut width de la barre de progression.
Résumé :
Grâce à l'étude de cet article, je pense que les amis comprendront mieux la méthode de mise en œuvre des barres de progression dans JavaScript. Chaque méthode Elles sont toutes différentes, les amis peuvent choisir la méthode appropriée en fonction de leurs propres besoins !
Recommandations associées :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：JavaScript implémente le code natif pour la barre de progressionArticle suivant：JavaScript implémente le code natif pour la barre de progression
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript