Maison > interface Web > js tutoriel > le corps du texte

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

小云云
Libérer: 2018-01-10 10:56:02
original
4816 Les gens l'ont consulté

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>
Copier après la connexion
  • 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//花瓣生成时间间隔
   })
 })
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal