基于HTML5 SVG可互动的3D标签云jQuery插件-H5教程-PHP中文网

首页

web前端

H5教程

基于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）！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系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";

vue3+vite2中怎么使用svg方法May 11, 2023 pm 05:55 PM

一、安装vite-plugin-svg-icons此处还需要安装下fast-glob相关依赖，不然vite运行npmrundev时会报Cannotfindmodule'fast-glob’的错误npmifast-glob@3.x-Dnpmivite-plugin-svg-icons@2.x-D二、在src/components/svgIcon下新建组件index.vueimport{computed}from'vue';cons

See all articles