imgplay-jQuery-Plug-in für die Canvas-basierte Bildsequenzwiedergabe

Kurzes Tutorial

imgplay ist ein jQuery-Plug-in für die Bildsequenzwiedergabe auf Basis von HTML5-Canvas. Über dieses Plug-in kann eine Gruppe von Bildern nacheinander abgespielt werden. Außerdem können Sie die Wiedergabe anhalten, vor- und zurückspulen und in den Vollbildmodus wechseln.

Verwendung

Für die Verwendung dieses Plug-Ins müssen die Dateien jquery.imgplay.css und jQuery sowie jquery.imgplay.js in die Seite eingefügt werden.

<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>

HTML-Struktur

Die HTML-Struktur dieses Bildplayer-Plugins ist sehr einfach: Verwenden Sie einen

-Container, um eine Gruppe von Bildelementen zu umschließen. Bilder können das src-Attribut oder das data-src-Attribut verwenden.

<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>

Initialisierungs-Plug-in

Nachdem das Seiten-DOM-Element geladen wurde, kann das Bildwiedergabe-Plug-in über die Methode imgplay() initialisiert werden.

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

Konfigurationsparameter

Das Bildplayer-Plugin verfügt über 3 Konfigurationsparameter:

• Name: der Name des Bildplayers, der Standard ist: „imgplay“.

• Rate: Die Häufigkeit der Bildwiedergabe. Je größer der Wert, desto schneller wird es abgespielt. Der Maximalwert beträgt 100 und der Minimalwert 0,001.

• Steuerelemente: Ob Steuerschaltflächen angezeigt werden sollen.

Das Obige ist der Inhalt des imgplay-canvas-basierten jQuery-Plug-ins für die Bildsequenzwiedergabe. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn). )!

Verwandte Etiketten：

imgplay，canvas，jQuery

Quelle：php.cn

Vorheriger Artikel：Niedliche Cartoon-Tieranimations-Spezialeffekte basierend auf SVG und CSS3 Nächster Artikel：Laden von Animationsspezialeffekten basierend auf HTML5 Canvas- und Rebound-Animationen

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

• Videomaterial zum Aufbau Ihres eigenen PHP-Frameworks von Grund auf
  2023-03-15 16:54:01
• Beispielanalyse, wie PHPMailer das QQ-Postfach verwendet, um die E-Mail-Versandfunktion abzuschließen
  2023-03-15 12:26:02
• Einführung in den Empfang von E-Mails in IMAP in PHP
  2023-03-14 18:58:01
• Beispiel für die schnelle Implementierung der Array-Deduplizierung in PHP
  2023-03-14 11:30:01
• Zusammenfassung der Verwendung aller Attribute des -Tags in HTML
  1970-01-01 08:00:00
• Zusammenfassung der PHP-Grundkenntnisse (notwendig für Anfänger zum Einstieg)
  2023-03-16 15:20:01
• Einführung in die Verwendung von typeof in JavaScript
  1970-01-01 08:00:00
• Einführung in die Verwendung der Bestätigungsmethode () in JavaScript
  1970-01-01 08:00:00
• Eine detaillierte Einführung in das HTML5-Platzhalterattribut
  1970-01-01 08:00:00
• So implementieren Sie Einzelauswahl, Mehrfachauswahl und Rückwärtsauswahl in Formularen in ReactJS
  1970-01-01 08:00:00

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

0

2

1843

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

0

10

2014

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

0

1

1696

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...

Aus 2024-04-18 23:52:34

0

1

1596

Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen

Aus 2024-04-16 10:10:18

0

0

1613

verwandte Themen

Mehr>

• Was sind die JQuery-Plug-Ins?
• So bedienen Sie JSON mit JQuery
• Was sind die Produktionsmethoden der HTML5-Animationsproduktion?
• So löschen Sie Elemente in JQuery
• Verwendung der jQuery-Methode hover()
• jquery implementiert die Paging-Methode
• Was ist ein verstecktes Element in jquery?
• Was wird in jquery hervorgehoben?