So verwenden Sie jQuery, um einen kontinuierlichen Rotationsanimationseffekt eines Bildes zu erzielen

Bei der Webseitenproduktion kann die Verwendung von Animationseffekten die Lebendigkeit und Attraktivität der Seite steigern. Einer der Effekte besteht darin, den Effekt einer ständigen Rotation eines Bildes zu erzielen, was der Seite mehr visuelle Wirkung und künstlerischen Sinn verleihen kann. In diesem Artikel stellen wir vor, wie Sie mit jQuery einen einfachen Animationseffekt für die Bildrotation implementieren.

1. Vorbereitung

Zuerst müssen wir ein Bild vorbereiten und es dann lokal speichern. Hier verwenden wir ein dynamisches Bild namens „spinner.gif“. Sie können ein ähnliches Bild aus dem Internet herunterladen, um es zu ersetzen.

2. Führen Sie die jQuery-Bibliothek ein

Bevor Sie den Animationseffekt implementieren, müssen Sie zuerst die jQuery-Bibliothek vorstellen. Dieser Code sollte im Head-Tag platziert werden.

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

3. Erzielen Sie den Effekt der kontinuierlichen Rotation von Bildern

Fügen Sie ein div-Element in der HTML-Datei hinzu und legen Sie dann die Breite und Höhe des Elements sowie das Hintergrundbild in der CSS-Datei fest. Sie müssen außerdem das Transformationsattribut des Elements festlegen, um es zu drehen. Der Code lautet wie folgt:

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

Fügen Sie als Nächstes den folgenden Code in jQuery hinzu, um den Effekt einer kontinuierlichen Drehung des Bildes zu erzielen:

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

Im Code wird die setInterval()-Funktion von jQuery zum Implementieren von Timing-Operationen verwendet. In setInterval wird der Anfangswert der Gradvariablen auf 0 Grad gesetzt und der Gradwert wird alle 10 Millisekunden um 1 Grad erhöht. Gleichzeitig wird durch Ändern der CSS-Transformationseigenschaft das Bild im div-Element gedreht. Schließlich wird die Seite wie ein sich ständig drehendes Bild aussehen.

4. Zusammenfassung

In diesem Artikel haben wir gelernt, wie man mit jQuery einen einfachen Bildrotationseffekt erzielt. Indem der Grad der Bildrotation so eingestellt wird, dass er jedes Mal automatisch zunimmt, wird der Effekt einer Echtzeit-Bildrotation erzielt. Dieser Animationseffekt kann die Lebendigkeit und Attraktivität der Seite erhöhen. Ich hoffe, dass dieser Artikel für alle hilfreich ist.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie jQuery, um einen kontinuierlichen Rotationsanimationseffekt eines Bildes zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!