Maison > Article > interface Web > rotation div dans jquery
jQuery est actuellement l'une des bibliothèques JavaScript les plus populaires, qui fournit aux développeurs de nombreux outils pour simplifier le code et simplifier le processus de développement. Il prend en charge divers effets d'animation, rendant les pages Web plus dynamiques. Parmi eux, la rotation div est un effet d'animation courant. Ce qui suit explique comment utiliser jQuery pour réaliser la rotation div.
1. Comprendre les concepts de base
Avant de commencer à utiliser jQuery pour implémenter la rotation div, nous devons comprendre quelques concepts de base.
La transformation de l'attribut de rotation CSS3 est la clé pour réaliser la rotation div. Son format de syntaxe est le suivant :
transform:rotate(angle);
Parmi eux, l'angle peut être un nombre positif ou un nombre négatif, indiquant l'angle de rotation .
La méthode animate() de jQuery est utilisée pour obtenir des effets d'animation. Son format de syntaxe est le suivant :
$(selector).animate({params},speed,callback);
Description du paramètre :
<!DOCTYPE html> <html> <head> <title>jQuery旋转div示例</title> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="box"></div> <button id="rotateBtn">旋转</button> </body> <script src="script.js"></script> </html>Le contenu du fichier CSS est le suivant :
#box{ width: 100px; height: 100px; background-color: #00FF7F; margin: 100px auto; transition: all 1s; }Ce code crée un div avec une couleur d'arrière-plan de # 00FF7F, la largeur et la hauteur sont toutes deux de 100 px, centrées. Parmi eux, l'attribut transition définit le temps nécessaire au div pour passer d'un état à un autre, en secondes. Nous avons également ajouté un bouton pour déclencher l'effet de l'animation de rotation div. Étape 2 : Écrire du code JavaScript Dans le fichier HTML, nous avons introduit un fichier JavaScript nommé "script.js". Dans ce fichier, nous utiliserons jQuery pour animer la rotation des div. Le code est le suivant :
$(function(){ $("#rotateBtn").click(function(){ $("#box").animate({deg: '+=90'}, { duration: "slow", step: function(now){ $(this).css({ transform: 'rotate(' + now + 'deg)' }); } }); }); });Ce code est divisé en deux parties : (1) Après avoir cliqué sur le bouton, appelez l'animer () pour déclencher l'effet d'animation de rotation div.
$("#box").animate({deg: '+=90'}, { duration: "slow", step: function(now){ $(this).css({ transform: 'rotate(' + now + 'deg)' }); } });Parmi eux, le premier paramètre est le paramètre d'effet d'animation, et deg est un attribut personnalisé que nous avons utilisé pour enregistrer l'angle de rotation. Lorsque vous cliquez sur le bouton, l'ajout de 90 degrés à l'attribut deg de l'élément div peut obtenir l'effet d'une rotation de 90 degrés. Le deuxième paramètre est un objet permettant de définir la durée de l'animation et la fonction de rappel pour chaque étape de l'animation. Notez qu'ici, nous utilisons la fonction de rappel d'étape pour contrôler l'angle de rotation de chaque étape afin d'obtenir l'effet de rotation div. (2) Écrivez une fonction de rappel
step: function(now){ $(this).css({ transform: 'rotate(' + now + 'deg)' }); }Dans la fonction de rappel, nous mettons à jour l'angle de rotation du div et contrôlons dynamiquement l'angle de rotation en passant la valeur now au attribut de transformation. 3. Exemple d'exécution Maintenant, nous avons terminé le code pour la rotation div et pouvons l'exécuter via le navigateur pour voir l'effet. Pendant le processus en cours, nous pouvons cliquer sur le bouton "Rotation" pour obtenir l'effet de rotation de l'élément div. De plus, nous pouvons également obtenir des effets d'animation plus riches en modifiant les propriétés pertinentes du fichier de style CSS. Par exemple, différents effets d'animation peuvent être obtenus en modifiant des paramètres tels que la durée du temps de transition et la vitesse de rotation. En bref, il est très simple d'utiliser jQuery pour obtenir des effets d'animation de rotation div. Il vous suffit de comprendre les règles d'utilisation des propriétés de rotation CSS3 et de la méthode animate() de jQuery, et vous pouvez facilement réaliser divers. effets de rotation souhaités.
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!