Comment faire pivoter les images dans jquery-Questions et réponses frontales-php.cn

Comment faire pivoter les images dans jquery

WBOY

Libérer： 2023-05-18 11:24:37

original

597 Les gens l'ont consulté

La rotation des images est un effet courant dans la conception Web, qui peut rendre les pages Web plus vivantes et plus intéressantes. Dans le développement front-end, nous utilisons souvent jQuery pour obtenir cet effet. Cet article explique comment utiliser jQuery pour réaliser la rotation d'images.

1. Créer une image

Vous devez d'abord préparer une image à faire pivoter. Il peut s'agir d'un simple cercle ou d'une image complexe avec du texte et des motifs. Cet article prendra comme exemple un simple diagramme circulaire.

2. Écrivez le code HTML et CSS

Mettez l'image dans le fichier HTML, comme indiqué ci-dessous :

<div class="rotate">
  <img src="circle.png">
</div>

Copier après la connexion

Pour faire pivoter l'image, nous devons modifier son style CSS. La méthode de modification spécifique est la suivante :

.rotate {
  display: inline-block;
  position: relative;
  margin: 50px;
}
.rotate img {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

Copier après la connexion

L'objectif principal de la modification ci-dessus est de définir l'image et son cadre contenant un positionnement relatif et absolu, et en même temps de définir la largeur, la hauteur et la position de l'image.

3. Utilisez jQuery pour obtenir une rotation d'image

Ensuite, nous utiliserons jQuery pour obtenir un effet de rotation d'image. Il existe une fonction très pratique animate() dans jQuery, qui peut être utilisée pour obtenir une variété d'effets d'animation, y compris la rotation. Ici, nous utiliserons cette fonction pour implémenter la rotation de l'image.

Le code spécifique est le suivant :

$(document).ready(function() {
  $(".rotate img").animate({ 
    rotate: '360deg'
  },{
    duration: 2000,
    step: function(now, fx) {
      $(this).css('-webkit-transform','rotate('+now+'deg)');
      $(this).css('-moz-transform','rotate('+now+'deg)');
      $(this).css('transform','rotate('+now+'deg)');
    }
  });
});

Copier après la connexion

Le code ci-dessus fait les choses suivantes :

Une fois la page chargée, recherchez l'élément avec la classe ".rotate img" et utilisez la fonction animate() pour le faire pivoter à 360°. degrés.
Dans la fonction animate(), la durée de transition de l'animation est définie sur 2000 millisecondes, soit 2 secondes.
Dans la fonction de rappel d'étape, l'élément pivote en fonction de l'angle de rotation actuel et certains préfixes du fabricant du navigateur sont ajoutés pour garantir la compatibilité de l'effet d'animation dans différents navigateurs.

Exécutez le code ci-dessus pour faire pivoter l'image !

4. Exemple de code complet

Ce qui suit est le code HTML et jQuery complet :

Code HTML :

<html>
<head>
 <meta charset="UTF-8">
 <title>jQuery图片自转示例</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div class="rotate">
   <img src="circle.png">
 </div>
 
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <script src="script.js"></script>
</body>
</html>

Copier après la connexion

Code CSS :

.rotate {
  display: inline-block;
  position: relative;
  margin: 50px;
}
.rotate img {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

Copier après la connexion

Code jQuery :

$(document).ready(function() {
  $(".rotate img").animate({ 
    rotate: '360deg'
  },{
    duration: 2000,
    step: function(now, fx) {
      $(this).css('-webkit-transform','rotate('+now+'deg)');
      $(this).css('-moz-transform','rotate('+now+'deg)');
      $(this).css('transform','rotate('+now+'deg)');
    }
  });
});

Copier après la connexion

Résumé

Avec les étapes ci-dessus, vous pouvez utiliser jQuery dans Implémenter des effets de rotation d'image sur les pages Web. De plus, jQuery peut également être utilisé pour implémenter divers autres effets d'animation, tels que des fondus entrants et sortants, des glissements, etc., qui peuvent être utilisés pour améliorer l'interactivité et la beauté des pages Web. J'espère que cet article vous aidera !

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!