So drehen Sie Bilder in JQuery-Front-End-Fragen und Antworten-php.cn

So drehen Sie Bilder in JQuery

WBOY

Freigeben： 2023-05-18 11:24:37

Original

596 Leute haben es durchsucht

Bildrotation ist ein häufiger Effekt im Webdesign, der Webseiten lebendiger und interessanter machen kann. In der Front-End-Entwicklung verwenden wir häufig jQuery, um diesen Effekt zu erzielen. In diesem Artikel wird erläutert, wie Sie mit jQuery eine Bilddrehung realisieren.

1. Erstellen Sie ein Bild

Zuerst müssen Sie ein Bild vorbereiten, das gedreht werden soll. Es kann ein einfacher Kreis oder ein komplexes Bild mit Text und Mustern sein. In diesem Artikel wird als Beispiel ein einfaches Kreisdiagramm verwendet.

2. HTML- und CSS-Code schreiben

Fügen Sie das Bild wie unten gezeigt in die HTML-Datei ein:

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

Nach dem Login kopieren

Um das Bild zu erstellen rotieren müssen wir seinen CSS-Stil ändern. Die spezifische Änderungsmethode lautet wie folgt:

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

Nach dem Login kopieren

Der Hauptzweck der obigen Änderung besteht darin, das Bild und sein enthaltendes Feld auf relative und absolute Positionierung festzulegen und die Breite, Höhe und Position des Bildes festzulegen Bild.

3. Verwenden Sie jQuery, um eine Bilddrehung zu erzielen.

Als Nächstes verwenden wir jQuery, um einen Bilddrehungseffekt zu erzielen. In jQuery gibt es eine sehr praktische Funktion animate(), mit der sich verschiedene Animationseffekte, einschließlich Rotation, erzielen lassen. Hier verwenden wir diese Funktion, um die Bilddrehung zu implementieren.

Der spezifische Code lautet wie folgt:

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

Nach dem Login kopieren

Der obige Code führt die folgenden Dinge aus:

Nachdem die Seite geladen wurde, Suchen Sie ein Element mit der Klasse „.rotate img“ und verwenden Sie die Funktion animate(), um es um 360 Grad zu drehen.
In der Funktion animate() ist die Dauer des Animationsübergangs auf 2000 Millisekunden eingestellt, also 2 Sekunden.
In der Step-Callback-Funktion wird das Element entsprechend dem aktuellen Drehwinkel gedreht und einige Präfixe des Browserherstellers hinzugefügt, um die Kompatibilität des Animationseffekts in verschiedenen Browsern sicherzustellen.

Führen Sie den obigen Code aus, um das Bild zu drehen!

4. Vollständiges Codebeispiel

Das Folgende ist der vollständige HTML- und jQuery-Code:

HTML-Code:

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

Nach dem Login kopieren

#🎜🎜 # CSS-Code:

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

Nach dem Login kopieren

jQuery-Code:

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

Nach dem Login kopieren

Zusammenfassung

Durch die oben genannten Schritte können Sie jQuery verwenden, um Bildrotationseffekte im Web zu erzielen Seiten. Darüber hinaus können mit jQuery auch verschiedene andere Animationseffekte wie Ein- und Ausblenden, Schieben usw. implementiert werden, mit denen die Interaktivität und Schönheit von Webseiten verbessert werden kann. Ich hoffe, dieser Artikel hilft Ihnen!

Das obige ist der detaillierte Inhalt vonSo drehen Sie Bilder in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!