Plug-in jQuery de nuage de tags 3D interactif basé sur HTML5 SVG-Tutoriel H5-php.cn

Maison

interface Web

Tutoriel H5

Plug-in jQuery de nuage de tags 3D interactif basé sur HTML5 SVG

Jan 19, 2017 pm 01:58 PM

Bref tutoriel

svg3dtagcloud.js est un plug-in jQuery de nuage de tags 3D basé sur HTML5 SVG. Ce plug-in de nuage de tags 3D ne nécessite aucun style CSS supplémentaire, peut utiliser la souris pour interagir avec les tags et fournit de nombreux paramètres pour contrôler l'apparence du nuage de tags.

Comment utiliser

L'utilisation de ce plug-in de nuage de tags 3D nécessite l'introduction des fichiers jQuery et jquery.svg3dtagcloud.min.js.

&lt;script src=&quot;js/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/jquery.svg3dtagcloud.min.js&quot;&gt;&lt;/script&gt;

Copier après la connexion

Structure HTML

Vous pouvez utiliser un conteneur <div> comme conteneur d'emballage du nuage de tags 3D.

&lt;div id=&quot;tag-cloud&quot;&gt;&lt;/div&gt;

Copier après la connexion

Initialisez le plug-in

Vous devez d'abord configurer un parcours de tableau d'objets. Le tableau contient les balises que vous devez créer et leurs adresses de lien correspondantes.

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

Copier après la connexion

Ensuite, vous pouvez initialiser le plug-in de nuage de tags 3D via la méthode suivante.

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

Copier après la connexion

Paramètres de configuration

Les paramètres de configuration disponibles du plug-in svg3dtagcloud.js sont :

entrées : un tableau d'objets utilisés pour initialiser les balises.
width : La largeur du nuage de tags.
hauteur : La hauteur du nuage de tags.
rayon : le rayon du nuage de tags.
radiusMin : Le rayon minimum du nuage de tags.
bgDraw : s'il faut utiliser la couleur d'arrière-plan.
bgColor : couleur de fond.
opacityOver : La transparence de l'étiquette lorsque la souris glisse dessus.
opacityOut : Transparence de l'étiquette lorsque la souris quitte l'étiquette.
opacitySpeed : vitesse de transition de transparence des étiquettes.
fov : comment le contenu est présenté.
vitesse : la vitesse de l'animation du nuage de tags.
fontFamily : La police du nuage de tags.
fontSize : La taille de la police du nuage de tags.
fontColor : La couleur de la police du nuage de tags.
fontWeight : fontWeight de la police du nuage de tags.
fontStyle : Le style de police du nuage de tags.
fontStretch : le fontStretch de la police du nuage de tags.
fontToUpperCase : s'il faut convertir en police majuscule.

Ce qui précède est le contenu du plug-in interactif jQuery de nuage de tags 3D basé sur HTML5 SVG. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php. cn) !

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn