rotation du clic de souris de l'animation jquery

Avec le développement continu de la technologie Internet, les effets d'interaction entre les pages sont devenus un aspect auquel les concepteurs doivent prêter attention. Parmi eux, les effets d’animation font partie intégrante de l’interaction des pages. À cet égard, l'animation jQuery est l'une des techniques les plus couramment utilisées. Dans cet article, nous utiliserons un cas pour décrire comment utiliser l'animation jQuery pour obtenir un effet de rotation par clic de souris.

Tout d'abord, nous devons clarifier un concept, à savoir que jQuery est une bibliothèque JavaScript qui peut nous aider à réaliser les effets d'interaction de page plus facilement et plus rapidement. Ensuite, nous devons préparer du code.

Partie HTML :

<div class="box"></div>

Partie CSS :

.box {
  width: 100px;
  height: 100px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

Afin de rendre le code plus lisible, nous pouvons modifier la classe box en CSS Style paramètres. Parmi eux, l'attribut transform en CSS3 est utilisé, qui peut centrer l'élément horizontalement et verticalement grâce à la fonction de traduction.

Maintenant, nous devons utiliser jQuery pour obtenir l'effet de rotation du clic de souris. Tout d’abord, nous pouvons introduire la bibliothèque jQuery en HTML.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Ensuite, dans la partie JS, nous devons d'abord récupérer l'élément .box.

var box = $('.box');

Ensuite, nous pouvons utiliser l'événement click de jQuery pour écouter l'événement clic de souris de l'élément box. Lorsque l'utilisateur clique sur l'élément .box, nous pouvons déclencher une animation de rotation.

box.click(function() {
  box.animate({
    rotation: "+=360deg"
  }, {
    duration: 1000,
    easing: 'linear',
    step: function(now, fx) {
      $(this).css('transform', 'rotate(' + now + 'deg)');
    }
  });
});

Dans le code ci-dessus, nous utilisons la fonction animer de jQuery pour créer une animation de rotation. Dans la fonction animer, nous définissons l'angle de rotation (rotation : "+=360deg") et la durée de l'animation (durée : 1000). Nous utilisons également une option d'assouplissement pour définir la méthode d'assouplissement de l'animation, ici l'assouplissement linéaire est utilisé.

Dans la fonction animer, nous avons également mis en place une fonction étape. Cette fonction sera appelée une fois par frame. Dans cette fonction, nous pouvons mettre à jour les propriétés CSS de l'élément en fonction de l'état de la frame actuelle. Dans cet exemple, nous mettons à jour l'attribut transform de l'élément .box en fonction de l'angle de rotation actuel à chaque image.

Maintenant, nous avons terminé un effet de rotation de base par clic de souris. Nous pouvons exécuter ce code dans un navigateur local et voir comment il fonctionne.

Résumé :

Dans cet article, nous utilisons un cas pour décrire comment utiliser l'animation jQuery pour obtenir l'effet de rotation du clic de souris. Dans ce processus, nous avons utilisé la fonction animer de jQuery et l’attribut transform de CSS3. Bien que cet effet soit simple, dans la conception Web réelle, il peut apporter une meilleure expérience interactive aux utilisateurs.

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!