jQueryプログレスバー効果を実装する方法-jsチュートリアル-php.cn

jQueryプログレスバー効果を実装する方法

清浅

リリース： 2019-01-11 16:38:32

オリジナル

5016 人が閲覧しました

jQuery プログレスバーの効果は、jQMeter.js プラグインを通じて簡単に実現でき、そのスタイルはカスタマイズできます

# [おすすめコース: jQuery チュートリアル ]

jQuery プログレスバー効果を実現するには、外部 jQuery プラグイン jQMeter.js を導入する必要があります。これはシンプルで実用的です。軽量のプログレスバープラグインを簡単に組み込んで、アニメーション効果を備えた水平または垂直のプログレスバーを実装できます。

# プログレスバーの実装プロセス:

(1) 外部導入 jqmeter.js ファイル

ダウンロードアドレス:

http://www.gerardolarios.com/plugins-and-tools/jqmeter/

<script src="jqmeter.min.js"></script>
<script src="./jquery/jquery-2.2.4.js"></script>

ログイン後にコピー

(2) HTML に div 要素を作成します

<div id="jqmeter-container"></div>

ログイン後にコピー

(3) 完全なコード

 $(function(){
       	$("#jqmeter-container").jQMeter({
       		goal:&#39;1000&#39;,
       		raised:&#39;600&#39;,
       		width:&#39;450px&#39;,
       		height:&#39;50px&#39;,
       		animationSpeed:2000,
       		counterSpeed:3000,
       		bgColor:&#39;#BA3AB5&#39;,
       	});
       })

ログイン後にコピー

レンダリングは次のとおりです:

jQueryプログレスバー効果を実装する方法 ##jqmeter.js ファイルのパラメータ

#Parameter

Typegoal#stringstringstringstring#bgColorstring#444進行状況バーの背景色。 hex、rgba、および color キーワードをサポートします。 barColorstring#bfd255進行状況バーの色。 hex、rgba、および color キーワードをサポートします。 orientationstringhorizontal進行状況バーの方向は、「水平」または「垂直」に設定できます。 '。垂直の進行状況バーに設定されている場合は、このパラメータを設定する必要があります。 true#animationSpeedinteger2000進行状況バーのアニメーション時間 (ミリ秒単位) ##counterSpeedinteger2000進行状況バーがカウントする時間 (ミリ秒単位)

Default value	Description
デフォルト値なし、必須パラメータ	進行状況バーの全長。「$9000」などの文字列、または「9000」		raised
No などの整数に設定できます。デフォルト値、必須パラメータ	プログレスバーの現在の進行状況を入力します。「$5000」などの文字列、または「5000」		width
100 などの整数に設定できます。 %-水平幅。 (水平進行状況バーで設定する必要があります)	進行状況バーの水平幅を設定します。パーセンテージまたはピクセル値		height
50px として設定できます。 (垂直進行状況バーで設定する必要があります)	進行状況バーの垂直高さを設定します。パーセンテージまたはピクセル値に設定できます


		#displayTotal	boolean
進行状況バーの完了パーセンテージを表示するかどうか。