recherche

Maison >interface Web >js tutoriel >jQuery implémente un exemple complet de l'effet de barre de progression affiché en haut de la page_jquery

jQuery implémente un exemple complet de l'effet de barre de progression affiché en haut de la page_jquery

WBOY
WBOYoriginal
2016-05-16 15:26:511310parcourir

L'exemple de cet article décrit comment jQuery implémente l'effet de barre de progression affiché en haut de la page. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Le code spécifique est le suivant : 

<!Doctype html>
<html>
<head>
<title>页面顶部显示的进度条效果</title>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
</head>
<body>
<div id="web_loading"><div></div></div>
<script src="jquery1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">// < ![CDATA[
  jQuery(document).ready(function(){
    jQuery("#web_loading div").animate({width:"100%"},800,function(){ 
      setTimeout(function(){jQuery("#web_loading div").fadeOut(500); 
      }); 
    }); 
  });
// ]]></script>
<style>
#web_loading{
z-index:99999;
width:100%;
}
#web_loading div{
width:0;
height:5px;
background:#FF9F15;
}
</style
</body>
</html>

Cliquez ici pour l'exemple de code completTéléchargez depuis ce site.

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：js pour obtenir des compétences d'effet_javascript en matière de conception d'interface utilisateur d'interface de gestion de projet de type carteArticle suivant：js pour obtenir des compétences d'effet_javascript en matière de conception d'interface utilisateur d'interface de gestion de projet de type carte

Articles Liés

Voir plus