jQuery implementiert Beispielcode für Kirschblüten-Spezialeffekte auf Webseiten

In diesem Artikel wird hauptsächlich jQuery vorgestellt, um den besonderen Effekt von Kirschblüten auf Webseiten zu erkennen. Freunde, die es brauchen, können darauf verweisen.

Grund für die Entwicklung

• Ich habe im Unterricht gesehen, dass der Desktop-Hintergrund eines Mädchens ein Kirschblütenbaum war, und mir kam sofort die Idee, Kirschblüten zum Fliegen zu bringen auf der Webseite. Widmen Sie dieses Plug-in dieser Klassenkameradin.

• Ich habe Anwendungs-Plug-ins wie Fokusbilder, Rotationsbilder, Wasserfallfluss usw. entwickelt ist das erste Mal, dass ich diese Art von Plug-in erstellt habe. Was interessiert Sie?

Entwicklungstools

• Jquery + Webstorm, keine Konfiguration einer zusätzlichen Umgebung erforderlich, mobiles Endgerät kann nicht verwendet werden

Effektdemonstration

Um auffälliger zu sein, wurde der Hintergrund in Schwarz geändert . Das GIF-Bild ist etwas verzögert, aber der tatsächliche Effekt ist glatter

Einzelheiten zum Effekt finden Sie unter Github

Verwendung

• Hinzufügen Fügen Sie den HTML-Code zu der Seite hinzu, auf der der Effekt hinzugefügt werden muss. Platzieren Sie ihn am besten im ersten Tag unter dem Body-Element

<p class="cherry">
<img id="yinghua" src="../image/yinghua.png" alt="" >
</p>

• Import the js-Code und jede Variable können nach Bedarf geändert werden

$(function(){
   $('.cherry').Cherry_Blossoms({
     is_Cherry:true,//是否生成樱花
     image_min:10,//花瓣最小宽度和高度
     image_max:50,//花瓣最大宽度和高度
     time_min:10000,//花瓣最快下坠时间
     time_max:20000,//花瓣最慢下坠时间
     interval:500//花瓣生成时间间隔
   })
 })

js-Plug-in

• IIFE (sofort anonyme Funktion ausführen)

• $.extend(), Erweiterungs-Plug-in definiert Standardparameter

• randomNum() setzt [m,n] Typ zufällig auf Zahl

Verwandte Empfehlungen:

JavaScript zum Implementieren personalisierter Navigationsleisteneffekte

Verwenden Sie H5, um Feuerwerke zu erstellen. Anleitung Partikeleffekte erstellen

CSS-Wasserwellen-Button-Effekte

Das obige ist der detaillierte Inhalt vonjQuery implementiert Beispielcode für Kirschblüten-Spezialeffekte auf Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!