Maison > interface Web > tutoriel HTML > Plug-in d'effet spécial de réflexion de vague d'eau jQuery super cool

Plug-in d'effet spécial de réflexion de vague d'eau jQuery super cool

黄舟
Libérer: 2017-01-18 14:27:30
original
1595 Les gens l'ont consulté

Bref tutoriel

lake.js est un plug-in jQuery qui peut créer des effets de réflexion des vagues d'eau. Ce plug-in jquery peut convertir n'importe quelle image en composant de canevas, afin que l'image puisse générer un effet de réflexion réaliste des vagues d'eau.

Méthode d'utilisation

Introduisez les fichiers jquery et Lake.js dans la page.

<script src="path/to/jquery.min.js"></script>                  
<script src="path/to/lake.js"></script>
Copier après la connexion

La structure HTML

peut créer un effet de réflexion des vagues d'eau pour n'importe quelle image.

<img id="lake-img" src="lake.png" style="display: none;"/>
Copier après la connexion

Initialisation du plug-in

Une fois l'élément DOM de la page chargé, vous pouvez initialiser le plug-in de réflexion des ondes d'eau jquery via la méthode suivante.

$(function() {
  $(&#39;#lake-img&#39;).lake({
    &#39;speed&#39;: 1,
    &#39;scale&#39;: 0.5,
    &#39;waves&#39;: 10
  });
});
Copier après la connexion

Paramètres de configuration

Le plug-in de réflexion des vagues d'eau jquery dispose de 3 paramètres de configuration disponibles :

  • vitesse : la vitesse de la vague d'eau mouvement.

  • échelle : la hauteur de la crête de la vague d'eau.

  • vagues : Le nombre de vagues d'eau.

Ce qui précède est le contenu du plug-in super cool d'effets spéciaux de réflexion des vagues d'eau jQuery. Pour plus de contenu connexe, veuillez faire attention au site Web chinois PHP (www.php.cn). )!


É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