recherche

Maison >interface Web >js tutoriel >jquery implémente un effet de dégradé de barre de progression en pourcentage simulé code_jquery

jquery implémente un effet de dégradé de barre de progression en pourcentage simulé code_jquery

WBOY
WBOYoriginal
2016-05-16 15:34:441352parcourir

L'exemple de cet article décrit le code jquery pour simuler l'effet de dégradé de la barre de progression en pourcentage. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Le code a été traité ici afin que vous puissiez facilement voir le pourcentage de chargement. Cela n'est pas nécessaire en utilisation réelle.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/jquery-mn-bfb-scroll-cha-style-demo/

Le code spécifique est le suivant : 

<html>
<head>
<title>jquery模拟百分比进度条</title>
<script type='text/javascript' src='jquery1.3.2.js'></script>
<style>
#loading{ background:url(bak.png) 0 0 no-repeat; width:397px; height:49px;}
#loading div{ background:url(pro.png) 0 0 no-repeat; line-height:49px;height:49px; text-align:right;}
</style>
<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()",500);
SetProgress(i);
i++;
}
}
$(document).ready(function() {
doProgress();
});
</script>
</head>
<body>
<div id="message"></div>
<div id="loading"><div>
</body>
</html>

J'espère que cet article sera utile à tous ceux qui programment jQuery.

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：Plug-in de calendrier Jquery pour créer un simple calendrier_jqueryArticle suivant：Plug-in de calendrier Jquery pour créer un simple calendrier_jquery

Articles Liés

Voir plus