jQuery implémente un exemple de code pour les effets spéciaux de chute de fleurs de cerisier sur les pages Web

Cet article présente principalement jQuery pour réaliser l'effet spécial de la chute des fleurs de cerisier sur les pages Web. L'effet est très bon. Les amis qui en ont besoin peuvent s'y référer.

Raison du développement

• J'ai vu que le fond d'écran d'une fille était un cerisier en fleurs en classe, et j'ai immédiatement eu l'idée de faire voler les fleurs de cerisier sur la page Web. Dédiez ce plug-in à cette camarade de classe ;

• J'ai développé des plug-ins d'application tels que des images de mise au point, des images de rotation, un flux de cascade, etc., mais cela. c'est la première fois que je crée ce type de plug-in, alors qu'est-ce qui vous intéresse C'est vrai

Outils de développement

• Jquery+webstorm, pas besoin de configurer d'environnement supplémentaire, le terminal mobile ne peut pas être utilisé

Démonstration de l'effet

Afin d'être plus visible, l'arrière-plan a été changé en noir . L'image gif est un peu lente, mais l'effet réel est plus fluide

Pour plus de détails sur l'effet, veuillez consulter Github

Utilisation

• Ajouter. code html à la page où l'effet doit être ajouté. Il est préférable de le placer dans la première balise sous l'élément body

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

• Importer le. code js où chaque variable peut être modifiée selon les besoins

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

plug-in js

• IIFE (exécuter immédiatement la fonction anonyme)

• $.extend(), le plug-in d'extension définit les paramètres par défaut

• randomNum() définit le type [m,n] de manière aléatoire Number

Recommandations associées :

JavaScript pour implémenter des effets de barre de navigation personnalisés

Utiliser H5 pour créer des feux d'artifice Comment créer des effets de particules

effets de bouton de vague d'eau CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!