Interactive 3D tag cloud jQuery plug-in based on HTML5 SVG-H5 Tutorial-php.cn

Interactive 3D tag cloud jQuery plug-in based on HTML5 SVG

黄舟

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

Original

1460 people have browsed it

Brief Tutorial

svg3dtagcloud.js is a 3D tag cloud jQuery plug-in based on HTML5 SVG. This 3D tag cloud plug-in requires no additional CSS styles, can use the mouse to interact with tags, and provides many parameters to control the appearance of the tag cloud.

How to use

Using the 3D tag cloud plug-in requires the introduction of jQuery and jquery.svg3dtagcloud.min.js files.

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

Copy after login

HTML structure

You can use a

container as the wrapping container of the 3D tag cloud.

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

Copy after login

Initialize the plug-in

First you need to set up an object array traversal, which contains the tags you need to make and their corresponding link addresses.

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

Copy after login

Then you can initialize the 3D tag cloud plug-in through the following method.

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

Copy after login

Configuration parameters

The available configuration parameters of the svg3dtagcloud.js plug-in are:

##entries: an object array used to initialize tags.
width: The width of the tag cloud.
height: The height of the tag cloud.
radius: The radius of the tag cloud.
radiusMin: The minimum radius of the tag cloud.
bgDraw: Whether to use background color.
bgColor: background color.
opacityOver: the label transparency when the mouse slides over the label.
opacityOut: Label transparency when the mouse leaves the label.
opacitySpeed: label transparency transition speed.
fov: how the content is presented.
speed: The speed of tag cloud animation.
fontFamily: The font of the tag cloud.
fontSize: The font size of the tag cloud.
fontColor: The font color of the tag cloud.
fontWeight: The fontWeight of the tag cloud font.
fontStyle: The font style of the tag cloud.
fontStretch: The fontStretch of the font of the tag cloud.
fontToUpperCase: Whether to convert to uppercase font.

The above is the content of the interactive 3D tag cloud jQuery plug-in based on HTML5 SVG. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!