Heim > Artikel > Web-Frontend > jQuery-Tutorial: So laden und animieren Sie Inhalte mit jQuery
jQuery-Tutorial: So laden und animieren Sie Inhalte mit jQuery
- 王林Original
- 2023-09-03 21:21:071436Durchsuche
Wenn Sie auf einen Link auf einer Webseite klicken, wird normalerweise der Inhalt dieser URL in unseren Browser geladen. So funktionieren die meisten Links und Websites im Internet. Sie können dieses Standardverhalten jedoch auch mit etwas Code ändern, um den Inhalt der neuen URL in ein bestimmtes Element der aktuellen Webseite zu laden, ohne die gesamte Seite neu zu laden.
Dies kann mit ein wenig Hilfe von JavaScript erreicht werden. Wir werden die jQuery-Bibliothek verwenden, um die schwere Arbeit im Zusammenhang mit der Animation und dem Laden von AJAX-Inhalten zu erledigen.
Sie können Inhalte auch mit einfachem JavaScript laden und animieren.
Bereit zum Markieren
Wir werden anhand einer sehr einfachen Webseite demonstrieren, wie der Effekt funktioniert. Die hier erlernten Grundsätze gelten jedoch auch für andere Websites. Dies ist das Markup für die Homepage der Website, die wir laden und animieren werden.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="team.html">Our Team</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<span class="loader"></span>
<section id="content">
<img src="dog.svg" / alt="jQuery-Tutorial: So laden und animieren Sie Inhalte mit jQuery" >
<h1>Embrace Pawsitivity, Transform Lives!</h1>
<p>Welcome to Pawsitive Care Foundation, a dedicated organization working towards the well-being and protection of animals.</p>
<p>Our animal Welfare NGO provides a range of services to support animal welfare:</p>
<ol>
<li>Rescue and rehabilitation of abused and abandoned animals</li>
<li>Adoption programs to find loving homes for animals in need</li>
<li>Education and awareness campaigns to promote responsible pet ownership</li>
<li>Lobbying and advocacy for stronger animal protection laws</li>
<li>Collaboration with local communities to implement spay/neuter programs</li>
</ol>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="load-content.js"></script>
</body>
</html>
Das -Tag verweist auf die Datei style.css, die das CSS enthält, das zum Gestalten aller Webseiten verwendet wird. Der Hauptteil der Webseite enthält die Klasse nav 元素，其中包含用户可以访问的链接列表。有一个 span 元素和 loader. Immer wenn der Benutzer auf einen der Links in der Navigation klickt, wird dieses Loader-Element ein- und ausgeblendet. Der Loader zeigt an, dass die Seite gerade geladen wird.
Danach haben wir ein section 元素，其中 id 设置为 content。我们网站的每个网页都会有此部分。本节中的内容是我们将使用 AJAX 加载的内容。我们在 body 元素末尾附近还有两个 script 标签。第一个 script-Tag, das jQuery lädt, und ein zweites Tag, das unsere eigene JavaScript-Datei lädt.
Mit Hilfe von etwas CSS sieht unsere Seite so aus:
Sie können ähnliche Seiten mit den Namen about.html, team.html und contact.html erstellen.
Styling von Ladern und Inhalten
Wir lernen nun, wie man mit CSS einen Loader so animiert, dass er sich dreht, während neue Inhalte geladen werden. Dies ist das CSS, das unseren Loader am Laufen hält.
.loader {
background: white;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 2rem;
top: 1.2rem;
animation: 0.5s infinite spin;
border-radius: 50%;
border-top: 5px solid black;
border-bottom: 5px solid gray;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Hier gibt es ein paar Dinge zu beachten. Erstens verfügen Lader über eine absolute Positionierung. Dadurch wird es aus dem normalen Fluss des Dokuments herausgenommen, sodass wir es an der gewünschten Stelle platzieren können, ohne den Fluss anderer Inhalte zu unterbrechen.
Wir animieren den Loader kontinuierlich mit animation 属性根据 spin Keyframe-Werten, wobei jede Animationsschleife in 0,5 Sekunden abgeschlossen ist.
Verwenden Sie border-radius: 50%, um unseren Lader rund zu machen, da er die gleiche Breite und Höhe hat. Die Verwendung unterschiedlicher Randfarben oben und unten ist lediglich eine Stilvorliebe.
Wir werden außerdem das folgende CSS verwenden, um sicherzustellen, dass der von uns geladene Inhalt die gesamte Breite des Körpers abdeckt.
section#content {
width: 100% !important;
}
Dies wird wichtig, wenn wir den Hauptinhalt animieren.
Wie Sie den allgemeinen Inhalt auf all diesen Seiten gestalten möchten, bleibt Ihnen überlassen.
Verwaltung von Linkklicks und Laden von Inhalten
Wenn Sie zu diesem Zeitpunkt eine Webseite laden, werden Sie feststellen, dass der Loader weiterhin angezeigt wird. Wir möchten, dass es nur angezeigt wird, wenn Inhalte geladen werden. Sobald unsere Seite fertig ist, können wir den folgenden Code-Behind-Loader verwenden:
$(document).ready(function () {
$(".loader").fadeOut();
});
Da wir steuern möchten, was passiert, wenn der Benutzer auf einen Link im Navigationsmenü klickt, müssen wir diesen Links einen Listener hinzufügen. Die Handler-Funktion des Listeners enthält den gesamten Code, den wir jedes Mal ausführen möchten, wenn auf den Link geklickt wird. Hier ist der Code für unseren Click-Handler:
$("nav li a").on("click", function(event) {
event.preventDefault();
const loadURL = `${$(this).attr("href")} #content`;
$("#content").hide("fast", function() {
loadContent(loadURL);
});
$(".loader").fadeIn("normal");
window.location.hash = $(this).attr("href").slice(0, -5);
});
Als Erstes verhindern wir im Click-Handler, dass die Standardaktion ausgeführt wird. Die Standardaktion in diesem Beispiel besteht darin, dass der Benutzer zur verlinkten URL navigiert.
Da wir das Laden der verlinkten URL im Browser blockiert haben, liegt es in unserer Verantwortung, diesen Inhalt für den Betrachter manuell zu laden. Dazu holen wir uns zunächst das href 属性的值。我们还在 URL 末尾附加 #content des angeklickten Links, denn das ist es, was wir eigentlich laden wollen.
Wir verwenden die hide() 方法来隐藏 #content 部分。我们隐藏此部分是因为它当前包含用户尝试离开的页面的标记。 hide()-Methode in jQuery, die eine Zeichenfolge oder Zahl als ersten Parameter akzeptiert. Dieser Wert bestimmt, wie lange es dauert, das ausgewählte Element auszublenden. Stellen Sie es auf „Schnell“, um Inhalte nach 200 Millisekunden auszublenden.
hide() 方法会对所选元素的宽度、高度和不透明度进行动画处理，直到它们变为 0。一旦它们达到零，display 属性就会设置为 none.
Der zweite Parameter ist eine Rückruffunktion, die nach Abschluss der Ausblendanimation ausgelöst wird. Wir rufen loadContent() in der Callback-Funktion auf.
接下来，我们使用 fadeIn() 方法使我们的 loader 元素在加载页面内容时可见。我们还更新页面的 URL 以添加反映当前单击的链接的哈希值。
现在，我们将定义 loadContent() 函数，该函数接受您要加载的 URL 作为其参数。 loadContent() 函数使用另一个名为 showNewContent() 的辅助函数，如下所示：
function loadContent(url) {
$("#content").load(url, function() {
showNewContent();
});
}
function showNewContent() {
$("#content").show("fast", function() {
$(".loader").fadeOut("fast");
});
}
loadContent() 方法使用 jQuery 中内置的 load() 方法来加载 #content 元素中指定 URL 的内容。加载完成后执行回调函数。
我们使用回调函数来执行另一个名为 showNewContent() 的函数。还记得我使用 hide() 方法来隐藏 #content 元素吗？现在，我们将借助 show() 方法使其再次可见。
show() 方法基本上与 hide() 方法相反。它将通过逐渐增加所选元素的宽度、高度和不透明度来使所选元素可见。
在上一节中，我使用了一些 CSS 来确保内容元素的宽度始终保持在 100%。这样做是为了抵消 show() 和 hide() 更新所选元素宽度的影响。在我看来，保持宽度不变，同时对高度和不透明度进行动画处理看起来更好。
最终想法
在本教程中，我们学习了如何使用流行的 jQuery 库中的内置方法来加载我们网站上不同网页的内容并为其设置动画。
如果您想在网站上重现效果，请记住一些事项。首先，标记应该有一个内容元素，您可以在 AJAX 请求的帮助下动态加载新内容。其次，所有链接的单击处理程序应防止导航到单击的链接的默认行为。第三，您尝试以这种方式加载的网页最好属于同一域、子域等。这是因为它们将受到同源策略的约束。
如果您不打算使用 jQuery，也可以使用纯 JavaScript 实现相同的效果。
Das obige ist der detaillierte Inhalt vonjQuery-Tutorial: So laden und animieren Sie Inhalte mit jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!