So verwenden Sie JQuery, um Bilder schrittweise anzuzeigen

So verwenden Sie jquery, um das Bild schrittweise anzuzeigen: Erstellen Sie zuerst ein Bild mit dem img-Tag und erstellen Sie eine Schaltfläche. Rufen Sie dann das img-Objekt innerhalb der Funktion ab, verwenden Sie die Methode [fadeIn ()] und legen Sie die angegebenen Sekunden fest die Methode, die es dem Bild ermöglicht, allmählich zu erscheinen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery3.2.1-Version, Thinkpad T480-Computer.

So verwenden Sie jquery, um ein Bild schrittweise anzuzeigen:

1. Erstellen Sie eine neue HTML-Datei mit dem Namen test.html, um zu erklären, wie jquery ein Bild schrittweise anzeigt.

2. Verwenden Sie in der Datei test.html im p-Tag das img-Tag, um ein Bild zu erstellen, und setzen Sie die ID des Bildes auf myimg, das hauptsächlich zum Abrufen des img-Objekts über diese ID verwendet wird unten.

3. Legen Sie in der Datei test.html den CSS-Stil des img-Tags fest und stellen Sie die Anzeige auf „Keine“ ein, um das Bild auszublenden.

4. Erstellen Sie in der Datei test.html mit dem Button-Tag einen Button mit dem Button-Namen „Bild wird nach und nach angezeigt“.

5. Binden Sie in der Datei test.html das Ereignis onclick an die Schaltfläche, und führen Sie die Funktion disimg() aus.

6. Erstellen Sie im js-Tag die Funktion disimg(). Rufen Sie das img-Objekt über die ID (myimg) ab und verwenden Sie die Methode fadeIn(), um das Bild schrittweise anzuzeigen um nach und nach innerhalb von 5 Sekunden angezeigt zu werden.

7. Öffnen Sie die Datei test.html im Browser und klicken Sie auf die Schaltfläche, um den Effekt zu sehen.

Verwandte kostenlose Lernempfehlungen: Javascript(Video)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JQuery, um Bilder schrittweise anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!