Plug-in imgplay-jQuery pour la lecture de séquences d'images sur toile

Bref tutoriel

imgplay est un plug-in jQuery pour la lecture de séquences d'images basé sur un canevas HTML5. Grâce à ce plug-in, un groupe d'images peut être lu tour à tour. Vous pouvez également faire une pause, une avance rapide, un retour rapide et passer en mode plein écran pour visualiser les images.

Comment utiliser

L'utilisation de ce plug-in nécessite l'introduction des fichiers jquery.imgplay.css et jQuery et jquery.imgplay.js dans la page.

<link rel="stylesheet" type="text/css" href="css/jquery.imgplay.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.imgplay.js"></script>

Structure HTML

La structure HTML de ce plug-in de lecteur d'images est très simple : utilisez un conteneur

Les images peuvent utiliser l'attribut src ou l'attribut data-src.

<div id="imageplayer" class="imageplayer">
    <img src="img/1.jpg" />
    <img src="img/2.jpg" />
    <img src="img/3.jpg" />
    <img src="img/4.jpg" />
    <img src="img/5.jpg" />
    <img data-src="img/6.jpg" />
    <img data-src="img/7.jpg" />
    <img data-src="img/8.jpg" />
</div>

Plug-in d'initialisation

Une fois l'élément DOM de la page chargé, le plug-in de lecture d'image peut être initialisé via la méthode imgplay().

$(document).ready(function(){
   $('#imageplayer').imgplay();
});

Paramètres de configuration

Le plug-in du lecteur d'images possède 3 paramètres de configuration :

• name : le nom du lecteur d'images, le la valeur par défaut est : "imgplay".

• taux : la fréquence de lecture de l'image. Plus la valeur est grande, plus la lecture sera rapide. La valeur maximale est 100 et la valeur minimale est 0,001.

• contrôles : s'il faut afficher les boutons de contrôle.

Ce qui précède est le contenu du plug-in jQuery de lecture de séquence d'images basé sur imgplay-canvas. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn). )!

Étiquettes associées：

imgplay，canvas，jQuery

source：php.cn

Article précédent：Effets spéciaux d'animation d'animaux de dessin animé mignon basés sur SVG et CSS3 Article suivant：Chargement d'effets spéciaux d'animation basés sur l'animation HTML5 Canvas et Rebound

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

Derniers articles par auteur

• Matériel vidéo sur la création de votre propre framework PHP à partir de zéro
  2023-03-15 16:54:01
• Exemple d'analyse de la façon dont PHPMailer utilise la boîte aux lettres QQ pour compléter la fonction d'envoi d'e-mails
  2023-03-15 12:26:02
• Introduction à la façon de recevoir des e-mails en IMAP en php
  2023-03-14 18:58:01
• Exemple de mise en œuvre rapide de la déduplication de tableau en PHP
  2023-03-14 11:30:01
• Résumé de l'utilisation de tous les attributs de la balise en html
  1970-01-01 08:00:00
• Résumé des connaissances de base de PHP (nécessaire aux débutants pour débuter)
  2023-03-16 15:20:01
• Introduction à l'utilisation de typeof en JavaScript
  1970-01-01 08:00:00
• Introduction à l'utilisation de la méthode confirm() en JavaScript
  1970-01-01 08:00:00
• Une introduction détaillée à l'attribut HTML5 Placeholder
  1970-01-01 08:00:00
• Comment implémenter la sélection unique, la sélection multiple et la sélection inversée dans les formulaires dans ReactJS
  1970-01-01 08:00:00

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

0

3

2267

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

0

11

2400

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

0

1

2014

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...

Depuis 2024-04-18 23:52:34

0

1

1899

Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel

Depuis 2024-04-16 10:10:18

0

0

1969

Rubriques connexes

Plus>

• Que sont les plug-ins jquery ?
• Comment faire fonctionner json avec jquery
• Quelles sont les méthodes de production de production d'animation html5 ?
• Comment supprimer des éléments dans jquery
• Utilisation de la méthode jQuery hover()
• jquery implémente la méthode de pagination
• Qu'est-ce qu'un élément caché dans jquery
• Qu'est-ce qui est mis en évidence dans jquery