Heim > Artikel > Web-Frontend > Beispiele für CSS und JS, die Animationseffekte während des Ladens von Webseiten implementieren

Beispiele für CSS und JS, die Animationseffekte während des Ladens von Webseiten implementieren

黄舟Original: 2017-10-28 09:34:122825Durchsuche

Das Beispiel in diesem Artikel teilt den spezifischen Code für JS, um den Effekt des Ladens von Webseiten zu Ihrer Referenz zu erzielen. Der spezifische Inhalt ist wie folgt

Erforderliche Materialien:

Ein ladendes animiertes GIF-Bild

Grundlegende Logik:

Modale Box-Maske + Loading.gif-Animation,
standardmäßig ausgeblendete modale Box
Wenn die Seite mit dem Senden von Ajax-Anfragedaten beginnt, wird das Modalfeld angezeigt
Die Anfrage ist abgeschlossen und das Modalfeld wird ausgeblendet

Lassen Sie uns über Django eine neue Webanwendung erstellen, um es einfach zu üben

Üben

1. Erstellen Sie ein neues Django-Projekt, erstellen Sie die Anwendung app01, konfigurieren Sie Routing und Statik, weggelassen. Platzieren Sie die GIF-Animation im statischen Ordner mit der folgenden Struktur:

2. In der Ansicht definiert eine Funktion , die den Seitentest zurückgibt. html:

def test(request):
 return render(request, &#39;test.html&#39;)

3. Die test.html-Seite lautet wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <!-- 导入css样式 -->
 <link rel="stylesheet" href="/static/css/loading.css" rel="external nofollow" >
 <!-- 导入jquery 和 js文件 -->
 <script src="/static/plugins/jquery-3.2.1.js"></script>
 <script src="/static/js/loading.js"></script>
</head>
<body>

<h1>你好啊，朋友！</h1>
<hr>

<p id="content">
 <p>正在请求服务器数据....</p>
</p>

<!-- 模态框部分 -->
<p class="loading hide">
 <p class="gif"></p>
</p>

</body>
</html>

4. Der CSS-Stil lautet wie folgt:

/* 模态框样式 */
.loading {
 position: fixed;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 background-color: black;
 opacity: 0.4;
 z-index: 1000;
}

/* 动图样式 */
.loading .gif {
 height: 32px;
 width: 32px;
 background: url(&#39;/static/img/loading.gif&#39;);
 position: fixed;
 left: 50%;
 top: 50%;
 margin-left: -16px;
 margin-top: -16px;
 z-index: 1001;
}

Anweisungen :

Durch Festlegen der Position „Fest“ und Festlegen von „Oben“, „Unten“, „Links“ und „Rechts“ auf 0 deckt das Modalfeld die gesamte Seite ab 🎜>Legen Sie das dynamische GIF-Bild als Hintergrund fest und zentrieren Sie es, um den Ladeeffekt anzuzeigen.
Durch Festlegen des Z-Index-Werts wird das GIF-Bild über dem modalen Feld angezeigt >
Hintergrundfarbe: Schwarz Ja Um es offensichtlicher zu machen, können Sie es bei spezieller Verwendung auf Weiß einstellen. Starten Sie nach der Eingabe das Senden von Ajax-Anfragen und fordern Sie Daten aus der Server-Ansicht ajax_handler an . Zu diesem Zeitpunkt wird die modale Box
angezeigt, unabhängig davon, ob sie erfolgreich ist oder nicht. 6.ajax_handler-Ansicht ist wie folgt: Es simuliert eine Netzwerkverzögerung und gibt einige Zeichenfolgen zurück:
Der Effekt ist wie folgt:

$(function () {
 //准备请求数据，显示模态框
 $(&#39;p.loading&#39;).show();

 $.ajax({
  url: "/ajax_handler.html/",
  type: &#39;GET&#39;,
  data: {},
  success: function (response) {
   var content = response.content;
   $(&#39;#content&#39;).html(content);

   //请求完成，隐藏模态框
   $(&#39;p.loading&#39;).hide();
  },
  error: function () {
   $(&#39;#content&#39;).html(&#39;server error...&#39;);

   //请求完成，隐藏模态框
   $(&#39;p.loading&#39;).hide();
  }
 })
});

Das obige ist der detaillierte Inhalt vonBeispiele für CSS und JS, die Animationseffekte während des Ladens von Webseiten implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Beispiele für die Anzeigeimplementierung von Ein- und Ausblendeffekten in CSSNächster Artikel：Beispiele für die Anzeigeimplementierung von Ein- und Ausblendeffekten in CSS

In Verbindung stehende Artikel

Mehr sehen