Maison > Article > interface Web > rotation div dans jquery

rotation div dans jquery

王林original: 2023-05-08 15:29:10960parcourir

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.

Attribut de rotation CSS3

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

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 :

params : paramètres d'effet d'animation, qui peuvent être des paires clé-valeur d'attributs CSS. Par exemple, {largeur : '500px', hauteur : "500px'}.
speed : durée de l'animation, exprimée en millisecondes, par exemple 1000ms.
callback : La fonction de rappel une fois l'animation terminée.

En appelant la méthode animate(), nous pouvons faire pivoter l'élément div pendant le processus d'animation, obtenant ainsi l'effet de rotation div.

2. Code d'implémentation

Ci-dessous, nous présenterons en détail comment utiliser jQuery pour obtenir l'effet d'animation de la rotation div.

Étape 1 : Créer des fichiers HTML et CSS

Tout d'abord, nous devons créer un fichier HTML et un fichier de style CSS.

Le contenu du fichier HTML est le suivant :

<!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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：jquery convertit les nombres en jsonArticle suivant：jquery convertit les nombres en json

Articles Liés

Voir plus