キャンバスベースの画像シーケンス再生用の imgplay-jQuery プラグイン-H5 チュートリアル-php.cn

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

黄舟

リリース： 2017-01-19 13:51:58

オリジナル

2017 人が閲覧しました

簡単なチュートリアル

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 構造は非常に単純です。

コンテナーを使用して画像要素のグループをラップします。画像には 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(){
   $(&#39;#imageplayer&#39;).imgplay();
});

ログイン後にコピー

設定パラメータ

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

name: 画像プレーヤーの名前、デフォルトは「imgplay」です。
rate: 値が大きいほど、画像の再生速度が速くなります。最大値は 100、最小値は 0.001 です。
controls: コントロールボタンを表示するかどうか。

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