プラグインをダウンロード
(2)
簡単なチュートリアル
odoo.js は、HTML5 SVG に基づいた走行距離計デジタル モーション ブラー特殊効果プラグインです。このプラグインは、走行距離計の数値が急速に反転する効果をシミュレートするために使用されます。使い方は簡単で、数字を反転するとモーション ブラー効果があり、とてもクールです。
使用方法
odoo.js ファイルをページに導入します。
<script type="text/javascript" src="js/odoo.js"></script>
HTML 構造
オドメーターのコンテナとして
<div class="js-odoo"></div>
CSS スタイル
数字やその他の属性のフォントと色をカスタマイズできます。
.js-odoo { font-size: 60px; font-family: Roboto; fill: #fff; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); }
初期化プラグイン
以下の方法でodoo.jsプラグインを初期化することができます。
odoo.default({ el:'.js-odoo',value:'¥68,123,000' })
初期化中にデフォルトの構成パラメータを変更することもできます。
odoo.default({ el: '.js-odoo', value: '£42,000,000', lineHeight: 1.35, letterSpacing: 1, animationDelay: 100, letterAnimationDelay: 100 });
オドメーターアニメーションをキャンセルしたい場合は、cancel() メソッドを呼び出すことができます。
const cancel = odoo.default({ el: '.js-odoo', value: '£42,000,000' }); cancel();
上記は、SVG に基づいたオドメーター デジタル モーション ブラー特殊効果プラグインの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。