Comment utiliser jQuery pour obtenir un effet d'animation de rotation continue d'une image

Dans la production de pages Web, l'utilisation d'effets d'animation peut améliorer la vivacité et l'attractivité de la page. L'un des effets consiste à obtenir l'effet de rotation constante d'une image, ce qui peut ajouter plus d'impact visuel et de sens artistique à la page. Dans cet article, nous présenterons comment utiliser jQuery pour implémenter un effet d'animation de rotation d'image simple.

1. Préparation

Tout d'abord, nous devons préparer une image puis la sauvegarder localement. Ici, nous utiliserons une image dynamique appelée "spinner.gif". Vous pouvez télécharger une image similaire sur Internet pour la remplacer.

2. Présentez la bibliothèque jQuery

Avant d'implémenter l'effet d'animation, vous devez d'abord introduire la bibliothèque jQuery. Ce code doit être placé dans la balise head.

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

3. Obtenez l'effet de rotation continue des images

Ajoutez un élément div dans le fichier HTML, puis définissez la largeur et la hauteur de l'élément, ainsi que l'image d'arrière-plan dans le fichier CSS. Vous devez également définir l'attribut transform de l'élément pour le faire pivoter. Le code est le suivant :

<div class="spinner"></div>

<style type="text/css">
    .spinner {
        width: 100px;
        height: 100px;
        background: url('spinner.gif') no-repeat center center;
        transform: rotate(0deg);
    }
</style>

Ensuite, ajoutez le code suivant dans jQuery pour obtenir l'effet de rotation continue de l'image :

<script type="text/javascript">
    $(function(){
        var spinner = $('.spinner'); // 获取到 div 元素
        var deg = 0; // 设定图片的初始旋转度数为0
        setInterval(function(){
            deg += 1; // 旋转的度数每次增加1度
            spinner.css({'transform': 'rotate('+deg+'deg)'}); // 设置图片旋转的度数
        }, 10);
    });
</script>

Dans le code, la fonction setInterval() de jQuery est utilisée pour implémenter les opérations de synchronisation. Dans setInterval, la valeur initiale de la variable deg est définie sur 0 degré et la valeur deg est augmentée de 1 degré toutes les 10 millisecondes. Dans le même temps, en modifiant la propriété CSS transform, l'image dans l'élément div subit une rotation. Finalement, la page ressemblera à une image en rotation constante.

4. Résumé

Dans cet article, nous avons appris à utiliser jQuery pour obtenir un effet de rotation d'image simple. En réglant le degré de rotation de l'image pour qu'il augmente automatiquement à chaque instant, l'effet de rotation de l'image en temps réel est obtenu. Cet effet d'animation peut augmenter la vivacité et l'attractivité de la page. C'est une méthode couramment utilisée dans la production de pages Web. J'espère que cet article sera utile à tout le monde.

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!