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

簡単なチュートリアル

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: 'CodePen', url: 'http://codepen.io/', target: '_top' },
                { label: 'three.js', url: 'http://threejs.org/', target: '_top' },
                { label: 'JS Compress', url: 'http://jscompress.com/', target: '_top' },
                { label: 'TinyPNG', url: 'https://tinypng.com/', target: '_top' },
                { label: 'Can I Use', url: 'http://caniuse.com/', target: '_top' },
                { label: 'URL shortener', url: 'https://goo.gl/', target: '_top' },
                { label: 'Twitter', url: 'https://twitter.com/', target: '_top' },
                { label: 'Gulp', url: 'http://gulpjs.com/', target: '_top' },
                { label: 'Browsersync', url: 'https://www.browsersync.io/', target: '_top' },
                { label: 'GitHub', url: 'https://github.com/', target: '_top' },
                { label: 'Shadertoy', url: 'https://www.shadertoy.com/', target: '_top' },
                { label: 'jsPerf', url: 'http://jsperf.com/', target: '_top' },
                { label: 'Foundation', url: 'http://foundation.zurb.com/', target: '_top' },
                { label: 'CreateJS', url: 'http://createjs.com/', target: '_top' },
                { label: 'Velocity.js', url: 'http://julian.com/research/velocity/', target: '_top' },
                { label: 'jQuery', url: 'https://jquery.com/', target: '_top' },
            ];

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

$( '#tag-cloud' ).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 までご連絡ください。