基于HTML5 SVG可互动的3D标签云jQuery插件-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

基于HTML5 SVG可互动的3D标签云jQuery插件

PHP中文网

Mar 30, 2017 pm 05:47 PM

简要教程

svg3dtagcloud.js是一款基于HTML5 SVG的3D标签云jQuery插件。该3D标签云插件不需要额外的CSS样式，可使用鼠标与标签进行互动，并提供很多参数来控制标签云的外观。

使用方法

使用该3D标签云插件需要引入jQuery和jquery.svg3dtagcloud.min.js文件。

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

HTML结构

可以使用一个e388a4556c0f65e1904146cc1a846bee容器来作为该3D标签云的包裹容器

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

初始化插件

首先你需要设置一个对象数组遍历，数组中包含你需要制作的标签和它们对应的链接地址。

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

然后可以通过下面的方法来初始化该3D标签云插件。

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

配置参数

svg3dtagcloud.js插件的可用配置参数有：

entries：一个对象数组，用于初始化标签。

width：标签云的宽度。

height：标签云的高度。

radius：标签云的半径。

radiusMin：标签云的最小半径。

bgDraw：是否使用背景色。

bgColor：背景颜色。

opacityOver：鼠标滑过标签时的标签透明度。

opacityOut：鼠标离开标签时的标签透明度。

opacitySpeed：标签透明度过渡速度。

fov：how the content is presented。

speed：标签云动画的速度。

fontFamily：标签云的字体。

fontSize：标签云的字体大小。

fontColor：标签云的字体颜色。

fontWeight：标签云的字体的fontWeight。

fontStyle：标签云的字体样式。

fontStretch：标签云的字体的fontStretch。

fontToUpperCase：是否转换为大写字体。

以上就是基于HTML5 SVG可互动的3D标签云jQuery插件的内容，更多相关内容请关注PHP中文网（www.php.cn）！

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

聊聊如何利用 SVG 实现图片马赛克效果Sep 01, 2022 am 11:05 AM

不借助 Javascript，如何利用 SVG 实现图片马赛克效果？下面本篇文章就来带大家详细了解一下，希望对大家有所帮助！

svg怎么转jpg格式Nov 24, 2023 am 09:50 AM

svg可以通过使用图像处理软件、使用在线转换工具和使用Python图像处理库的方法来转jpg格式。详细介绍：1、图像处理软件包括Adobe Illustrator、Inkscape和GIMP；2、在线转换工具包括CloudConvert、Zamzar、Online Convert等；3、Python图像处理库等等。

深入浅析vue3+vite中怎么使用svg图标Apr 28, 2022 am 10:48 AM

svg图片在项目中使用的非常广泛，下面本篇文章带大家介绍一下如何在vue3 + vite 中使用svg图标，希望对大家有所帮助！

VUE3入门教程：使用Vue.js插件玩转SVGJun 16, 2023 am 09:48 AM

随着现代Web前端开发的不断发展，越来越多的技术被广泛应用于实际开发中。其中，Vue.js是目前最为流行的JavaScript框架之一，它基于MVVM模式，提供了丰富的API和组件库，使得开发响应式、可复用、高效的Web应用变得更加容易。而目前最新的Vue.js3版本相较于旧版，又有着更好的性能和更丰富的特性，引起了广泛的关注和研究。本文将会为大家介绍一种

详解用SVG给 favicon 添加标识Sep 07, 2022 am 10:30 AM

怎么使用SVG给 favicon 添加标识？下面本篇文章给大家介绍一下使用 SVG 生成带标识的 favicon的方法，希望对大家有所帮助！

vue3+vue-cli4中怎么使用svgMay 11, 2023 pm 05:58 PM

一、安装svg-sprite-loadernpminstallsvg-sprite-loader--save-dev二、在src/components/svgIcon下新建组件index.vueimport{computed}from"@vue/reactivity";exportdefault{name:"baseSvgIcon",props:{iconClass:{type:String},className:{type:String},},setup

在HTML5画布上绘制SVG文件Sep 15, 2023 pm 03:09 PM

要在画布元素上绘制HTMLImageElements，请使用drawImage()方法。此方法使用src=”mySVG.svg”定义一个Image变量，并在加载时使用drawImage。varmyImg=newImage();myImg.onload=function(){  ctx.drawImage(myImg,0,0);}img.src="http://www.example.com/files/sample.svg";