キャンバスベースの画像シーケンス再生用の imgplay-jQuery プラグイン

簡単なチュートリアル

imgplay は、HTML5 キャンバスに基づいて画像シーケンスを再生するための jQuery プラグインです。このプラグインを使用すると、一連の写真を順番に再生したり、一時停止、早送り、巻き戻ししたり、全画面モードで写真を表示したりすることができます。

使い方

このプラグインを使用するには、jquery.imgplay.css ファイルと jQuery および jquery.imgplay.js ファイルをページに導入する必要があります。

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

この画像プレーヤー プラグインの HTML 構造は非常に単純です。dc6dce4a544fdca2df29d5ac0ea9906b コンテナーを使用して画像要素のグループをラップします。画像には src 属性または 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>

初期化プラグイン

ページ DOM 要素がロードされた後、imgplay() メソッドを通じて画像再生プラグインを初期化できます。

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

設定パラメータ

画像プレーヤー プラグインには 3 つの設定パラメータがあります:

• name: 画像プレーヤーの名前、デフォルトは「imgplay」です。

• rate: 値が大きいほど、画像の再生速度が速くなります。最大値は 100、最小値は 0.001 です。

• controls: コントロールボタンを表示するかどうか。

上記は imgplay-canvas ベースの画像シーケンス再生 jQuery プラグインの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。