HTML5 SVG ベースのインタラクティブ 3D タグクラウド jQuery プラグイン-H5 チュートリアル-php.cn

HTML5 SVG ベースのインタラクティブ 3D タグクラウド jQuery プラグイン

黄舟

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

オリジナル

1436 人が閲覧しました

簡単なチュートリアル

svg3dtagcloud.js は、HTML5 SVG に基づいた 3D タグクラウド jQuery プラグインです。この 3D タグクラウドプラグインは追加の CSS スタイルを必要とせず、マウスを使用してタグを操作でき、タグクラウドの外観を制御するための多くのパラメータを提供します。

使い方

この3Dタグクラウドプラグインを使用するには、jQueryとjquery.svg3dtagcloud.min.jsファイルをインポートする必要があります。

<script src="js/jquery.min.js"></script>
<script src="js/jquery.svg3dtagcloud.min.js"></script>

ログイン後にコピー

HTML 構造

コンテナを 3D タグクラウドのラッピングコンテナとして使用できます。

<div id="tag-cloud"></div>

ログイン後にコピー

プラグインを初期化します

まず、作成する必要があるタグとそれに対応するリンクアドレスを含むオブジェクト配列トラバーサルを設定する必要があります。

var entries = [ 
                { label: &#39;CodePen&#39;, url: &#39;http://codepen.io/&#39;, target: &#39;_top&#39; },
                { label: &#39;three.js&#39;, url: &#39;http://threejs.org/&#39;, target: &#39;_top&#39; },
                { label: &#39;JS Compress&#39;, url: &#39;http://jscompress.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;TinyPNG&#39;, url: &#39;https://tinypng.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;Can I Use&#39;, url: &#39;http://caniuse.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;URL shortener&#39;, url: &#39;https://goo.gl/&#39;, target: &#39;_top&#39; },
                { label: &#39;Twitter&#39;, url: &#39;https://twitter.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;Gulp&#39;, url: &#39;http://gulpjs.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;Browsersync&#39;, url: &#39;https://www.browsersync.io/&#39;, target: &#39;_top&#39; },
                { label: &#39;GitHub&#39;, url: &#39;https://github.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;Shadertoy&#39;, url: &#39;https://www.shadertoy.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;jsPerf&#39;, url: &#39;http://jsperf.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;Foundation&#39;, url: &#39;http://foundation.zurb.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;CreateJS&#39;, url: &#39;http://createjs.com/&#39;, target: &#39;_top&#39; },
                { label: &#39;Velocity.js&#39;, url: &#39;http://julian.com/research/velocity/&#39;, target: &#39;_top&#39; },
                { label: &#39;jQuery&#39;, url: &#39;https://jquery.com/&#39;, target: &#39;_top&#39; },
            ];

ログイン後にコピー

その後、以下の方法で3Dタグクラウドプラグインを初期化することができます。

$( &#39;#tag-cloud&#39; ).svg3DTagCloud( {entries: entries} );

ログイン後にコピー

設定パラメータ

svg3dtagcloud.js プラグインの利用可能な設定パラメータは次のとおりです:

entries: タグの初期化に使用されるオブジェクトの配列。
width: タグクラウドの幅。
高さ: タグクラウドの高さ。
radius: タグクラウドの半径。
radiusMin: タグクラウドの最小半径。
bgDraw: 背景色を使用するかどうか。
bgColor: 背景色。
opacityOver: マウスがラベル上をスライドしたときのラベルの透明度。
opacityOut: マウスがラベルから離れたときのラベルの透明度。
opacitySpeed: ラベルの透明度の遷移速度。
fov: コンテンツの表示方法。
speed: タグクラウドアニメーションの速度。
fontFamily: タグクラウドのフォント。
fontSize: タグクラウドのフォントサイズ。
fontColor: タグクラウドのフォントの色。
fontWeight: タグクラウドフォントの fontWeight。
fontStyle: タグクラウドのフォントスタイル。
fontStretch: タグクラウドフォントの fontStretch。
fontToUpperCase: 大文字フォントに変換するかどうか。

上記は、HTML5 SVG に基づくインタラクティブ 3D タグクラウド jQuery プラグインのコンテンツです。その他の関連コンテンツについては、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。

HTML5 SVG ベースのインタラクティブ 3D タグ クラウド jQuery プラグイン

HTML5 SVG ベースのインタラクティブ 3D タグクラウド jQuery プラグイン