Heim > Artikel > Web-Frontend > So drehen Sie Bilder in JQuery

So drehen Sie Bilder in JQuery

WBOYOriginal: 2023-05-18 11:24:37538Durchsuche

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>

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

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

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>

#🎜🎜 # CSS-Code:

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

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

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!

jquery css html 回调函数 class

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Debian installiert NodeJSNächster Artikel：Debian installiert NodeJS

In Verbindung stehende Artikel

Mehr sehen