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!