ホームページ > 記事 > ウェブフロントエンド > HTML5 SVG ベースのインタラクティブ 3D タグクラウド jQuery プラグイン

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

黄舟オリジナル: 2017-01-19 13:58:361395ブラウズ

簡単なチュートリアル

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

dc6dce4a544fdca2df29d5ac0ea9906b コンテナを 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 サイト (www.php.cn) に注目してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：非常にクールでクリエイティブなセグメント化された SVG テキストアニメーションの特殊効果次の記事：非常にクールでクリエイティブなセグメント化された SVG テキストアニメーションの特殊効果

続きを見る

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

関連記事

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