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

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

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn