用tagcloud插件制作的超炫酷“云标签”（3D旋转和平铺），附前后台代码及标签配置页面

最新推荐文章于 2024-05-29 09:32:12 发布
最新推荐文章于 2024-05-29 09:32:12 发布
阅读量7.6k 收藏 3
点赞数
文章标签： tagcloud 云标签 标签云
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cc_blog/article/details/53391763
版权

HTML:（下方有图）

<link type="text/css" rel="stylesheet" href="__PUBLIC__/vendors_no/tagcloud/css/tagcloud.css">
<script src="__PUBLIC__/vendors_no/tagcloud/js/tagcloud.js"></script>
<script src="__PUBLIC__/vendors_no/tagcloud/js/tagcloud.min.js"></script>

<div class="col-lg-3 tab-content" style="margin-top:40px;min-height:860px;">
      <div style="border:1px solid #ddd;margin-bottom:30px;">
        <button title="3D旋转" id="style_whirl" type="button" data-type="jplist-grid-view" class="jplist-view jplist-grid-view btn btn-default"><i class="fa fa-th"></i></button>
        <button title="平铺" id="style_tile" type="butt

最低0.47元/天 解锁文章
Q版攀登者
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
创建一个3D动画标签云（Tag Cloud）通常涉及到HTML、CSS和JavaScript的结合
BLOG域名:programb.blog.csdn.net
07-13 640
创建一个3D动画标签云（Tag Cloud）通常涉及到HTML、CSS和JavaScript的结合。下面是一个简单的示例，它使用了纯CSS和HTML来创建一个基础的3D效果标签云。如果你想要一个更复杂的3D动画标签云，可能需要使用JavaScript库，如Three.js，或者使用WebGL来创建更高级的3D效果。这些库和API提供了更多的控制和选项来创建复杂的3D场景和动画。这个示例中的标签云在鼠标悬停时会进行360度的旋转。你可以根据需要调整CSS样式和动画效果，例如改变标签的大小、颜色、旋转角度等。
tag-cloud:节点标签云HTML生成器
05-02
tag-cloud-节点标签云HTML生成器 该节点模块将采用一系列标签和计数，并生成标签/词云。 安装 $ npm install tag-cloud 用法 let tagCloud = require ( 'tag-cloud' ) ; 原料药 tagCloud(array, callback, options) array -的形式的JSON文档的数组{的tagName：，计数：} callback表单function (err, html) ； 此函数将接收任何错误和/或生成HTML。 options （可选）指定以下任何字段的JSON文档： randomize布尔值-指示在生成标签云之前是否应对标签进行混洗。 [默认值：是] numBuckets数字-要使用的存储桶数[默认值：10] htmlTag字符串-您要使用HTML标签名称（即'span'）。 [默认：'spa
3d标签云实现过程（tagcloud.js）同步原生和 vue
红岸基地
11-22 1512
本来是没有准备写这个知识点，但是下载这个 js 的时候发现很多都是要钱或者是积分的，我就不明白了一个开源了这么久的 js 怎么还有人拿来挣钱的，同时还有一些只有原生 html 的例子，但是现在都是 框架主导的一些项目，显然是不行的，这篇文章就简单的写一下 怎么使用原生和 vue 分别使用 tagcloudjs 实现标签云，喜欢的可以直接拿去用，当然你也可以直接参考这个的例子写，我没有试过，但是 demo 是可行的tagcloudjs。
探索文本世界的视觉盛宴：jQuery.tagcloud.js项目解析与应用推广
最新发布
gitblog_00079的博客
05-29 286
探索文本世界的视觉盛宴：jQuery.tagcloud.js项目解析与应用推广 项目地址:https://gitcode.com/addywaddy/jquery.tagcloud.js 在数字化信息的汪洋中，如何高效地呈现关键词，让其既美观又直观？jQuery.tagcloud.js项目为我们提供了一种优雅的答案。本文将带你深入了解这一神器，从基础到进阶，发掘它的魅力，探讨其技术核心，并展望其在...
前端3D词云
github_39506988的博客
09-19 1061
前端3D词云。
html 3d tag效果,GitHub - NiklasKnaack/jquery-svg3dtagcloud-plugin: A very small and CSS-less jQuery pl...
weixin_42681774的博客
06-03 153
var entries = [{ image: './img/Basket.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Lorem ipsum' },{ image: './img/Briefcase.png', width: '50', height: '50...
jQuery tagcloud 插件
08-26
这个是自己根据一个已经有 3D 特效的标签云源代码修改而成，感谢原作者！ 用法： <div id="tag"> <a href=...>...</a> <a href=...>...</a> <a href=...>...</a> ... (无论多少个) </div> 然后 $("#tag").tagcloud({color:...,radius:...}); 即可
HTML5 3D标签云动画旋转代码.zip
07-11
一款简单好用的HTML5 3D标签云动画旋转代码，不需要额外的CSS样式，可使用鼠标与标签进行互动，鼠标悬停标签云停止旋转，所指向tag标签文字颜色高亮显示，其它标签文字则变暗。
TagCloud::cloud:3D TagCloud.js用鼠标旋转
05-27
鼠标滚动的是3D TagCloud 。 最小大小只有6KB，并且不依赖于其他库。 options.maxSpeed options.initSpeed options.direction options.keep options.containerClass options.itemClass options....
react-tagcloud:用于响应https的标签云组件
04-28
React-标签云 简单和可扩展的标签/词云React组件。 参见。 安装 npm install react-tagcloud # or with yarn yarn add react-tagcloud # react < 16.8.0 npm install react-tagcloud@1.4 基本用法 import { Tag...
hexo-tag-cloud:然而，这只是 hexo 的另一个标签云插件
05-30
然而，这只是 hexo 的另一个标签云插件。 看起来如何 您可以点击查看在线现场演示 如何使用 安装 进入您的hexo系统文件夹，然后将独立性"hexo-tag-cloud": "2.1.*"到package.json 然后执行npm install命令 那么您...
vue实现标签云效果的示例
01-22
闲扯两句 最近想给自己的博客上加上一个3D标签云的效果，用来表示自己博客文章的分组，网上找到了canvas实现的，还有a元素实现的解析3D标签云，我想让标签可以选择和点击，又不想在标签数量较多时操作a标签导致性能问题，于是svg就成了一个不错的选择。 标签初始化 这里实现的核心主要是参考了前面的那篇解析3D标签云的文章，作者给出了源码，讲解也比较通俗易懂。大体来说，整个代码分三步： 根据标签的数量，算出每个标签在球面上分布的x,y,z坐标 根据标签的坐标，将标签绘制出来，x,y坐标通过标签的位置来表示，z坐标通过标签字体的大小和透明度来表示 通过函数根据球的旋转角速度不断计算标签新
2.0 3DTagCloud标签云资源包
04-30
我经常看到一些网站有云标签，我也很喜欢这样的云标签，但是找到理想的并不是太多，这个资源包是我个人觉得还不错的Demo.
标签球状云特效(3D+Html+Js)
12-14
本文用三种方法实现关键字特效,第一个是流动效果,每二个是静态效果,第三个是3D云特效 1.因本文中关键字来自sql数据库的表字段,使用前需配置数据连接参数. 2.多个关键字通过逗号分隔,在读取到的关键字,需根据逗号重新分割后再显示,3D效果还需下载一个js文件, js地址:http://www.jimmy2k.top/js/lable_3D.js 3.演示效果地址 : http://www.jimmy2k.top/test/3D_clound.asp 4. 原文来自: http://www.jimmy2k.top/
HTML5 SVG可互动的3D标签云特效代码
03-20
HTML5 SVG可互动的3D标签云代码是一款不需要额外的CSS样式，可使用鼠标与标签进行互动，并提供很多参数来控制标签云的外观。
js制作tag标签文字云特效.zip_authorwk3_js_tag_文字云_标签
09-20
js制作tag标签文字云特效，适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。
js实现3d标签云tag动画效果js特效代码
ICode联盟
01-05 935
下载地址JS制作TAG标签云文字动画特效是一款当鼠标悬停某个标签时，当前标签静止，移出恢复滚动效果。tagcloud({ selector: ".tagcloud", //元素选择器 fontsize: 16, //基本字体大小, 单位px radius: 100, //滚动半径, 单位px mspeed: "normal", //滚动最大速度, 取值: slow, normal(默认), fast ispeed: "normal", //滚动初速度, 取值: slow, normal(默认), fast
翻翻git之---炫酷的自定义翻滚View TagCloudView
weixin_33841722的博客
02-22 128
转载请注明出处：王亟亟的大牛之路 周一好，又到了每周最困的一天，最近都被啮齿类动物搞的累死，废话不多，今天上一个自定义的ViewGroup实现一个3D球形集合。 效果图： 效果还不错，可以作为短小文字内容的展示用 How to use? Grade: compile 'com.moxun:tagcloudlib:1....
WordPress实现点击标签云中的某一标签，就展示出此标签下的所有文章
净心编程
06-24 1453
WordPress实现点击标签云中的某一标签，就展示出此标签下的所有文章 WordPress实现点击标签云（Tag Cloud）中的某一标签，就展示出此标签下的所有文章。 代码如下： <?php get_header(); ?> <section id=”primary” class=”content-area”> <main id=”main” cla...
wordpress3d旋转标签云
08-25
要在WordPress中添加3D...4. 在需要显示3D旋转标签云的页面或文章中，使用短代码`[tag_cloud_3d]`即可。 请注意，这只是一种简单的实现方法，你可以根据自己的需求进一步定制代码或者使用其他插件来实现更复杂的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值