Maison > Article > interface Web > Comment faire pivoter les images dans jquery

Comment faire pivoter les images dans jquery

WBOYoriginal: 2023-05-18 11:24:37542parcourir

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>

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;
}

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)');
    }
  });
});

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>

Code CSS :

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

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)');
    }
  });
});

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!

jquery css html 回调函数 class

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：Debian installer nodejsArticle suivant：Debian installer nodejs

Articles Liés

Voir plus