Interaktives 3D-Tag-Cloud-jQuery-Plug-in basierend auf HTML5 SVG-H5-Tutorial-php.cn

Interaktives 3D-Tag-Cloud-jQuery-Plug-in basierend auf HTML5 SVG

黄舟

Freigeben： 2017-01-19 13:58:36

Original

1435 Leute haben es durchsucht

Kurzes Tutorial

svg3dtagcloud.js ist ein 3D-Tag-Cloud-jQuery-Plug-in basierend auf HTML5 SVG. Dieses 3D-Tag-Cloud-Plug-in erfordert keine zusätzlichen CSS-Stile, kann mit der Maus mit Tags interagieren und bietet viele Parameter zur Steuerung des Erscheinungsbilds der Tag-Cloud.

So verwenden Sie

Die Verwendung dieses 3D-Tag-Cloud-Plugins erfordert die Einführung der Dateien jQuery und jquery.svg3dtagcloud.min.js.

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

Nach dem Login kopieren

HTML-Struktur

Sie können einen

-Container als Verpackungscontainer der 3D-Tag-Cloud verwenden.

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

Nach dem Login kopieren

Initialisieren Sie das Plug-in

Zuerst müssen Sie einen Objekt-Array-Traversal einrichten. Das Array enthält die Tags, die Sie erstellen müssen, und die entsprechenden Linkadressen.

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; },
            ];

Nach dem Login kopieren

Anschließend können Sie das 3D-Tag-Cloud-Plug-in mit der folgenden Methode initialisieren.

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

Nach dem Login kopieren

Konfigurationsparameter

Die verfügbaren Konfigurationsparameter des Plug-Ins svg3dtagcloud.js sind:

Einträge: ein Array der verwendeten Objekte um Tags zu initialisieren.
width: Die Breite der Tag-Cloud.
Höhe: Die Höhe der Tag-Cloud.
Radius: der Radius der Tag-Cloud.
radiusMin: Der minimale Radius der Tag-Cloud.
bgDraw: Ob Hintergrundfarbe verwendet werden soll.
bgColor: Hintergrundfarbe.
opacityOver: Die Transparenz des Etiketts, wenn die Maus darüber gleitet.
opacityOut: Etikettentransparenz, wenn die Maus das Etikett verlässt.
opacitySpeed: Übergangsgeschwindigkeit der Etikettentransparenz.
fov: wie der Inhalt präsentiert wird.
Geschwindigkeit: die Geschwindigkeit der Tag-Cloud-Animation.
fontFamily: Die Schriftart der Tag-Cloud.
fontSize: Die Schriftgröße der Tag-Cloud.
fontColor: Die Schriftfarbe der Tag-Cloud.
fontWeight: Das FontWeight der Tag-Cloud-Schriftart.
fontStyle: Der Schriftstil der Tag-Cloud.
fontStretch: der FontStretch der Schriftart der Tag-Cloud.
fontToUpperCase: Ob in Großbuchstaben konvertiert werden soll.

Das Obige ist der Inhalt des interaktiven 3D-Tag-Cloud-jQuery-Plugins basierend auf HTML5 SVG. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php. cn)!