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

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>

HTML-Struktur

Sie können einen dc6dce4a544fdca2df29d5ac0ea9906b-Container als Verpackungscontainer der 3D-Tag-Cloud verwenden.

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

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

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

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

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)!