interface Web
js tutoriel
Tutoriel jQuery : Comment charger et animer du contenu à l'aide de jQuery
Tutoriel jQuery : Comment charger et animer du contenu à l'aide de jQuery
Cliquer sur n'importe quel lien sur une page Web chargera généralement le contenu de cette URL dans notre navigateur. C’est ainsi que fonctionnent la plupart des liens et sites Web sur Internet. Cependant, vous pouvez également modifier ce comportement par défaut avec du code pour charger le contenu de la nouvelle URL dans un élément spécifique de la page Web actuelle sans recharger la page entière.
Cela peut être réalisé avec un peu d'aide de JavaScript. Nous utiliserons la bibliothèque jQuery pour effectuer le gros du travail lié à l'animation et au chargement du contenu AJAX.
Vous pouvez également charger et animer du contenu en utilisant du JavaScript simple.
Prêt à marquer
Nous utiliserons une page Web très simple pour démontrer comment fonctionne l'effet. Cependant, les principes que vous apprenez ici s’appliquent également à d’autres sites Web. Il s'agit du balisage de la page d'accueil du site Web que nous allons charger et animer.
<!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="/static/imghw/default1.png" data-src="dog.svg" class="lazy" / alt="Tutoriel jQuery : Comment charger et animer du contenu à l'aide de jQuery" >
<h1 id="Embrace-Pawsitivity-Transform-Lives">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>
renvoie au fichier style.css, qui contient le CSS utilisé pour styliser toutes les pages Web. Le corps de la page Web contient la classe nav 元素，其中包含用户可以访问的链接列表。有一个 span 元素和 loader. Chaque fois que l'utilisateur clique sur l'un des liens de la navigation, nous afficherons et masquerons cet élément de chargement. Le chargeur indiquera que la page est en cours de chargement.
Après cela, nous avons une balise section 元素，其中 id 设置为 content。我们网站的每个网页都会有此部分。本节中的内容是我们将使用 AJAX 加载的内容。我们在 body 元素末尾附近还有两个 script 标签。第一个 script qui charge jQuery et une deuxième balise qui charge notre propre fichier JavaScript.
Avec l'aide de quelques CSS, notre page ressemble à ceci :
Vous pouvez créer des pages similaires nommées about.html, team.html et contact.html.
Styling des chargeurs et du contenu
Nous allons maintenant apprendre à utiliser CSS pour animer un chargeur afin qu'il tourne lors du chargement d'un nouveau contenu. C'est le CSS qui fait tourner notre chargeur.
.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);
}
}
Il y a quelques points à noter ici. Premièrement, les chargeurs ont un positionnement absolu. Cela le sort du flux normal du document afin que nous puissions le placer où nous voulons sans interrompre le flux des autres contenus.
Nous animons le chargeur en continu en utilisant animation 属性根据 spin valeurs d'images clés, où chaque boucle d'animation se termine en 0,5 seconde.
Utilisez border-radius: 50% pour arrondir notre chargeur car il a la même largeur et la même hauteur. L’utilisation de couleurs de bordure différentes en haut et en bas n’est qu’une préférence de style.
Nous utiliserons également le CSS suivant pour nous assurer que le contenu que nous chargeons couvre toute la largeur du corps.
section#content {
width: 100% !important;
}
Cela deviendra important lorsque nous animerons le contenu principal.
La façon dont vous souhaitez styliser le contenu général de toutes ces pages dépend de vous.
Gestion des clics sur les liens et du chargement du contenu
Si vous chargez une page Web à ce moment-là, vous remarquerez une chose que le chargeur continuera à apparaître. Nous voulons qu'il apparaisse uniquement lors du chargement du contenu. Une fois notre page prête, nous pouvons utiliser le chargeur code-behind suivant :
$(document).ready(function () {
$(".loader").fadeOut();
});
Puisque nous voulons contrôler ce qui se passe lorsque l'utilisateur clique sur un lien dans le menu de navigation, nous devons attacher un écouteur à ces liens. La fonction de gestionnaire de l'écouteur contiendra tout le code que nous souhaitons exécuter à chaque fois que vous cliquerez sur le lien. Voici le code de notre gestionnaire de clics :
$("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);
});
La première chose que nous faisons dans le gestionnaire de clics est d'empêcher l'action par défaut de se produire. L'action par défaut dans cet exemple consiste pour l'utilisateur à accéder à l'URL liée.
Puisque nous avons bloqué le chargement de l'URL liée dans le navigateur, il est de notre responsabilité de charger manuellement ce contenu pour le spectateur. Pour ce faire, nous récupérons d’abord le href 属性的值。我们还在 URL 末尾附加 #content du lien cliqué puisque c’est ce que nous voulons réellement charger.
Nous utilisons la méthode hide() 方法来隐藏 #content 部分。我们隐藏此部分是因为它当前包含用户尝试离开的页面的标记。 hide() dans jQuery qui accepte une chaîne ou un nombre comme premier paramètre. Cette valeur détermine le temps nécessaire pour masquer l'élément sélectionné. Réglez-le sur Rapide pour masquer le contenu en 200 millisecondes.
hide() 方法会对所选元素的宽度、高度和不透明度进行动画处理，直到它们变为 0。一旦它们达到零，display 属性就会设置为 none.
Le deuxième paramètre est une fonction de rappel, qui est déclenchée une fois l'animation de masquage terminée. On appelle loadContent() dans la fonction de rappel.
接下来，我们使用 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 实现相同的效果。
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Explication détaillée des méthodes de référence jQuery : guide de démarrage rapide
Feb 27, 2024 pm 06:45 PM
Explication détaillée de la méthode de référence jQuery : Guide de démarrage rapide jQuery est une bibliothèque JavaScript populaire largement utilisée dans le développement de sites Web. Elle simplifie la programmation JavaScript et fournit aux développeurs des fonctions et fonctionnalités riches. Cet article présentera en détail la méthode de référence de jQuery et fournira des exemples de code spécifiques pour aider les lecteurs à démarrer rapidement. Présentation de jQuery Tout d'abord, nous devons introduire la bibliothèque jQuery dans le fichier HTML. Il peut être introduit via un lien CDN ou téléchargé
Comment utiliser la méthode de requête PUT dans jQuery ?
Feb 28, 2024 pm 03:12 PM
Comment utiliser la méthode de requête PUT dans jQuery ? Dans jQuery, la méthode d'envoi d'une requête PUT est similaire à l'envoi d'autres types de requêtes, mais vous devez faire attention à certains détails et paramètres. Les requêtes PUT sont généralement utilisées pour mettre à jour des ressources, comme la mise à jour de données dans une base de données ou la mise à jour de fichiers sur le serveur. Ce qui suit est un exemple de code spécifique utilisant la méthode de requête PUT dans jQuery. Tout d'abord, assurez-vous d'inclure le fichier de la bibliothèque jQuery, puis vous pourrez envoyer une requête PUT via : $.ajax({u
Comment supprimer l'attribut height d'un élément avec jQuery ?
Feb 28, 2024 am 08:39 AM
Comment supprimer l'attribut height d'un élément avec jQuery ? Dans le développement front-end, nous rencontrons souvent le besoin de manipuler les attributs de hauteur des éléments. Parfois, nous pouvons avoir besoin de modifier dynamiquement la hauteur d'un élément, et parfois nous devons supprimer l'attribut height d'un élément. Cet article explique comment utiliser jQuery pour supprimer l'attribut height d'un élément et fournit des exemples de code spécifiques. Avant d'utiliser jQuery pour exploiter l'attribut height, nous devons d'abord comprendre l'attribut height en CSS. L'attribut height est utilisé pour définir la hauteur d'un élément
Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page
Feb 28, 2024 pm 09:06 PM
Titre : jQuery Astuces : Modifier rapidement le texte de toutes les balises a de la page En développement web, nous avons souvent besoin de modifier et d'exploiter des éléments de la page. Lorsque vous utilisez jQuery, vous devez parfois modifier le contenu textuel de toutes les balises de la page en même temps, ce qui peut économiser du temps et de l'énergie. Ce qui suit explique comment utiliser jQuery pour modifier rapidement le texte de toutes les balises a de la page et donne des exemples de code spécifiques. Tout d'abord, nous devons introduire le fichier de la bibliothèque jQuery et nous assurer que le code suivant est introduit dans la page : <
Utilisez jQuery pour modifier le contenu textuel de toutes les balises
Feb 28, 2024 pm 05:42 PM
Titre : utilisez jQuery pour modifier le contenu textuel de toutes les balises. jQuery est une bibliothèque JavaScript populaire largement utilisée pour gérer les opérations DOM. En développement web, nous rencontrons souvent le besoin de modifier le contenu textuel de la balise de lien (une balise) sur la page. Cet article expliquera comment utiliser jQuery pour atteindre cet objectif et fournira des exemples de code spécifiques. Tout d’abord, nous devons introduire la bibliothèque jQuery dans la page. Ajoutez le code suivant dans le fichier HTML :
Comment savoir si un élément jQuery possède un attribut spécifique ?
Feb 29, 2024 am 09:03 AM
Comment savoir si un élément jQuery possède un attribut spécifique ? Lorsque vous utilisez jQuery pour exploiter des éléments DOM, vous rencontrez souvent des situations dans lesquelles vous devez déterminer si un élément possède un attribut spécifique. Dans ce cas, nous pouvons facilement implémenter cette fonction à l'aide des méthodes fournies par jQuery. Ce qui suit présentera deux méthodes couramment utilisées pour déterminer si un élément jQuery possède des attributs spécifiques et joindra des exemples de code spécifiques. Méthode 1 : utilisez la méthode attr() et l'opérateur typeof // pour déterminer si l'élément a un attribut spécifique
Comprendre le rôle et les scénarios d'application de eq dans jQuery
Feb 28, 2024 pm 01:15 PM
jQuery est une bibliothèque JavaScript populaire largement utilisée pour gérer la manipulation DOM et la gestion des événements dans les pages Web. Dans jQuery, la méthode eq() est utilisée pour sélectionner des éléments à une position d'index spécifiée. Les scénarios d'utilisation et d'application spécifiques sont les suivants. Dans jQuery, la méthode eq() sélectionne l'élément à une position d'index spécifiée. Les positions d'index commencent à compter à partir de 0, c'est-à-dire que l'index du premier élément est 0, l'index du deuxième élément est 1, et ainsi de suite. La syntaxe de la méthode eq() est la suivante : $("s
Résumé des fonctions d'opération de fichiers couramment utilisées en PHP
Apr 03, 2024 pm 02:52 PM
Exemple 1：basename()2：copy()3：dirname()4：disk_free_space()5：disk_total_space()6：file_exists()7：file_get_contents()8：file_put_contents()9：filesize()10：filetype( )11：glob()12：is_dir()13：is_writable()14：mkdir()15：move_uploaded_file()16：parse_ini_file()17：
