Beispiele für CSS und JS, die Animationseffekte während des Ladens von Webseiten implementieren-CSS-Tutorial-php.cn

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

黄舟

Freigeben： 2017-10-28 09:34:12

Original

2856 Leute haben es durchsucht

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;)

Nach dem Login kopieren

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>

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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();
  }
 })
});

Nach dem Login kopieren

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!