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 dc6dce4a544fdca2df29d5ac0ea9906b-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). )!