Heim > Artikel > Web-Frontend > jQuery implementiert ein vollständiges Beispiel für den Fortschrittsbalkeneffekt, der oben in page_jquery angezeigt wird

jQuery implementiert ein vollständiges Beispiel für den Fortschrittsbalkeneffekt, der oben in page_jquery angezeigt wird

WBOYOriginal: 2016-05-16 15:26:511256Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie jQuery den oben auf der Seite angezeigten Fortschrittsbalkeneffekt implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Der spezifische Code lautet wie folgt:

<!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>

Klicken Sie hier für den vollständigen BeispielcodeDownload von dieser Website.

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js, um UI-Design-Effekte für Projektmanagementschnittstellen im Kartenstil zu erwerben_Javascript-FähigkeitenNächster Artikel：js, um UI-Design-Effekte für Projektmanagementschnittstellen im Kartenstil zu erwerben_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen