用js实现3D球形标签云示例代码

物质：

1。案件不足，不能中止（待解决）。
2。非系统性和随机自动着色（要解决的）

首先，使用高度的知名网站的标签云，Flickr照片分享网站，标签云的设计师是交互设计师巴特菲尔德。之后，标签云的网站如德尔和Technorati通过。
标签云的第一次出现（或者至少是一个加权列表）可以概括为潜意识中的档案，在李斯特跳跃，威尔士诗人Landau，使用相同的逻辑加权文本来创建一个图形文本地图来描述爵士音乐。这首诗出现在他的书《魔力之火雪佛兰》（1980）。

HTML代码段
复制代码代码如下所示：




三维球的标签





水果类
苹果
香蕉
西瓜
3dtag
SEO
火龙果
梨
球状
CSS
PHP
java
继承
C #
面向对象的程序设计
语言类
西红柿
C++
C
番茄
演示

三维球形标签


Javaｓｃｒｉｐｔ代码段
复制代码代码如下所示：
var半径= 120； /旋转半径；
VaR DTR =数学。π/ 180；
var＝300；

无功mclist = { }；
var = false；
VaR永恒= 1；
无功lastb = 1；
无功分布=真；
无功tspeed = 10；
var大小= 250；

VaR mouseX = 0；
无功多的= 0；

无功howelliptical = 1；

var = null；
无功odiv = null；

窗口的指针（）函数。
{
var I＝0；
VaR OTAG = null；

odiv = document.getelementbyid（'div1）；

AA = odiv.getelementsbytagname（A）；

为（i = 0；i < aa.length；i++）
{
OTag = { }；

OTag。offsetwidth = AA {我}。offsetwidth；
OTag。offsetheight = AA {我}。offsetheight；

McList.push（OTAG）；
}

sinecosine（0,0,0）；

PositionAll（）；

ODiv。onmouseover =功能（）
{
主动=真；
}；

ODiv。onmouseout=功能（）
{
活动=假；
}；

ODiv。移动鼠标=功能（EV）
{
无功oevent = window.event EV | |；

oevent.clientx mouseX = -（odiv。offsetleft + odiv。offsetwidth / 2）；
老鼠= oevent.clienty -（odiv。offsettop + odiv。offsetheight / 2）；

mouseX / = 5；
老鼠 / = 5；
}；

setInterval（更新30）；
}；

函数更新（）
{
VaR；
VaR B；

如果（活动）
{
=（-math.min（math.max（-老鼠大小），大小）/半径）* tspeed；
B =（math.min（math.max（mouseX大小），大小）/半径）* tspeed；
}
其他的
{
* 0.98 =永恒；
B = lastb * 0.98；
}

永恒=一；
lastb = B；

如果（Math.abs（一）<= 0.01 math.abs（B）< = 0.01）
{
返回；
}

var＝0；
sinecosine（A，B，C）；
对于（var j = 0；J < mclist.length；j++）
{
VaR RX1 = mclist {，}。CX；
VaR RY1 = mclist {，}。CY *钙mclist {，}。CZ *（SA）；
VaR RZ1 = mclist {，}。CY * SA + mclist {，}。CZ×Ca；

VaR RX2 = RX1 * CB + RZ1 *某人；
var 2 = RY1；
VaR RZ2 = RX1 *（锑）+ RZ1 * CB；

VaR Rx3 RX2 CC + 2 * = *（SC）；
VaR RY3 = 2×SC + 2×CC；
VaR Rz3 = RZ2；

mclist {，}。CX = Rx3；
mclist {，}。CY = RY3；
mclist {，}。CZ = Rz3；

每= D /（D + Rz3）；

mclist {，}。x =（howelliptical * Rx3每*）-（howelliptical×2）；
mclist {，}，y = RY3 *每；
mclist { }规模=每J；
mclist {，}。α=每；

mclist {，}。α=（mclist {，}。alpha-0.6）*（10 / 6）；
}

工艺（）；
DepthSort（）；
}

depthsort（）函数
{
var I＝0；
VaR ATMP = { }；

为（i = 0；i < aa.length；i++）
{
ATmp.push（AA {我}）；
}

atmp.sort
（
功能（vitem1，vitem2）
{
如果（vitem1。CZ > vitem2。CZ）
{
返回- 1；
}
如果（vitem1。CZ < vitem2。CZ）
{
返回1；
}
其他的
{
返回0；
}
}
）；

为（i = 0；i < atmp.length；i++）
{
ATMP {我}，在=我的风格；
}
}

positionall（）函数
{
varφ= 0；
θ＝0；
VaR最大= mclist.length；
var I＝0；

VaR ATMP = { }；
无功ofragment = document.createdocumentfragment（）；

随机排序
为（i = 0；i < aa.length；i++）
{
ATmp.push（AA {我}）；
}

atmp.sort
（
（）函数
{
返回Math.random（）＜0.51：1；
}
）；

为（i = 0；i < atmp.length；i++）
{
ofragment.appendchild（ATMP {我}）；
}

odiv.appendchild（ofragment）；

对于（var i = 1；i < max + 1；i + +）{
如果（分销）
{
math.acosφ=（1 +（2×I-1）/最大）；
θ= math.sqrt（最大*数学。PI）×φ；
}
其他的
{
φ= Math.random（）*（数学，PI）；
θ= Math.random（）*（2 *数学。PI）；
}
坐标转换
mclist {·}。CX =半径* Math.cos（θ）* Math.sin（PHI）；
mclist {·}。CY =半径* Math.sin（θ）* Math.sin（PHI）；
mclist {·}。CZ =半径* Math.cos（PHI）；

AA {·}。风格。左= mclist {·}。CX + odiv。offsetwidth / 2-mclist {·}。offsetwidth / 2 + 'px；
AA {·}。风格。最高mclist {·}。CY + odiv。offsetheight / 2-mclist {·}。offsetheight / 2 + 'px；
}
}

功能工艺（）
{
var = odiv offsetwidth / 2；
var t = odiv offsetheight / 2；
对于（var i = 0；i < mclist.length；i++）
{
AA {我}。风格。左= mclist {我}。CX + l-mclist {我}。offsetwidth / 2 + 'px；
AA {我}。风格。最高mclist {我}，环磷酰胺+ t-mclist {我}。offsetheight / 2 + 'px；

AA {我}。math.ceil风格。字体大小=（12×mclist {我}。规模 / 2）+ 8 + 'px；

AA {我}。风格。过滤器=Alpha（透明度=+ 100 * mclist {我}。α+）；
AA {我}。风格。不透明度mclist {我}。阿尔法；
}
}

功能sinecosine（A，B，C）
{
SA = Math.sin（* DTR）；
CA = math.cos（* DTR）；
某人math.sin（b * DTR）；
CB = math.cos（b * DTR）；
SC = Math.sin（C * DTR）；
CC = Math.cos（C * DTR）；
}

CSS代码段
复制代码代码如下所示：
体{背景：# 000网址（指数。PNG）没有重复中心230px；}
# DIV1 {位置：相对；宽度：450px；身高：450px；保证金：20px汽车0；}
# DIV1一{位置：绝对；顶部：0px；左：0px；字体：微软雅黑；颜色：# FFF；font-weight: bold；文字装饰：无；填充：；}；}
# DIV1：悬停{ border: 1px solid # EEE；背景：# 000；}
# div1.blue {颜色：蓝色；}
# div1.red {颜色：红色；}
# div1.yellow {颜色：黄色；}

P {字体：16px微软雅黑；文本对齐：中心；颜色：# ba0c0c；}
P {字体大小：14px；颜色：# ba0c0c；}
a：悬停{颜色：红色；}