JavaScript实现3D标签云效果代码分享

69 浏览量更新于2024-08-28 收藏 48KB PDF 举报

本文将介绍如何使用JavaScript实现3D球状标签云的示例代码，以及探讨其在网站设计中的应用历史。同时，会注意到在实际实现中存在的一些问题，如无法实现标签悬停和自动上色。在网页设计中，标签云是一种流行的展示关键词或分类的方式，它通过字体大小和颜色的差异来表示每个标签的重要性或频率。这种设计最早由Flickr的交互设计师Stewart Butterfield引入，并迅速被其他知名网站如del、Technorati所采用。这种概念的起源可以追溯到Douglas Coupland的书籍《Microserfs》(1995)中的“潜意识档案”。下面是一个简单的HTML代码段，展示了如何创建3D球状标签云的基本结构。这段代码包括了HTML元素（`<a>`标签）以及链接到CSS样式表（`3Dtag_style.css`）和JavaScript脚本（`3Dtag.js`）的引用。这些链接的CSS和JS文件将负责实现3D效果和动态行为。 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>3D球状标签</title> <link rel="stylesheet" type="text/css" href="3Dtag_style.css"/> <script type="text/javascript" src="3Dtag.js"></script> </head> <body> <div id="div1">  <a href="#">水果类别</a> ... <a href="#" class="yellow">梨</a> <a href="#">球状</a> ... </div> </body> </html> ``` 在JavaScript文件（`3Dtag.js`）中，你需要编写代码来处理以下几个方面： 1. 计算每个标签的位置，以实现3D球状布局。这通常涉及到矩阵变换和坐标系统的理解。 2. 添加悬停效果，可能通过监听`mouseover`和`mouseout`事件，改变标签的样式来实现。 3. 实现系统随机自动上色，可以创建一个颜色数组，然后为每个标签分配一个随机颜色。然而，根据描述中的问题点，目前的示例代码中这两个功能尚未实现。对于悬停效果，可以通过添加CSS类或者直接在JavaScript中修改元素的样式来解决。对于自动上色，可以在初始化标签云时，为每个标签分配一个随机颜色值。在实际应用中，这样的3D标签云不仅可以提高用户的视觉体验，还可以增强用户与内容的交互性。不过，要注意保持良好的可读性和可访问性，避免过于复杂的设计影响到用户的理解和使用。

用用JS实现实现3D球状标签云示例代码球状标签云示例代码

Matter：

1、发现实例不足，无法悬停（有待解决）

2、无法系统随机自动上色（有待解决）

首先使用标签云的一家高知名度的网站—照片共享网站Flickr。标签云的设计者是交互设计师Stewart Butterfield。之后，标签

云被诸如del、Technorati等网站采纳。

首次公布的外观标签云（或至少是一个加权名单），可归结起来主要是”潜意识档案” ，在 Douglas Coupland的Microserfs（

1995 ）。在Lester Leaps Out，威尔士诗人朗道，使用同样的逻辑加权文本，以创造一个图形文字地图来描述爵士音乐。诗

中出现在他的书《Magic Fire Chevrolet》中（ 1980 ）。

html代码段

代码如下:

<!DOCTYPE html>

<html>

<title>3D球状标签</title>

</headers>

<body>

</div>

<p>3D球状tag</p>

</body></html>

Javascript代码段

代码如下:

var radius = 120; //旋转半径;

var dtr = Math.PI/180;

var d=300;

var mcList = [];

var active = false;

var lasta = 1;

var lastb = 1;

var distr = true;

var tspeed=10;

var size=250;

var mouseX=0;

var mouseY=0;

var howElliptical=1;

var aA=null;

var oDiv=null;

window.onload=function ()

{

var i=0;

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38659812

粉丝: 3
资源: 882

JavaScript实现3D标签云效果代码分享

html5 canvas酷炫的3D球形文字云动画特效

js气泡文字标签云代码

JS实现3D图片旋转展示效果代码

java球体旋转3d效果_three.js实现的3D球状拖动旋转效果

使用Pingouin进行csv文件Bartlett's球状检验

python实现Bartlett’s球状检验

用python写一个炫酷球状表格

R代码球状模型拟合半变异函数模型

vue生成一个球状的按钮

R代码拟合球状半变异函数模型

最新资源