制作一个简单的Javascript3DTagCloud旋转标签云侧翼 很多人的博客都有一个可以旋转的flash3DTagCloud标签云（WordPressWP-Cumulus软件），看起来还蛮酷的。 这里我们使用Javascript来实现一个简单的3DTagCloud标签云。 点击输入demo地址，先给出Html。 比较简单。 它是一个包含 ul 和一些超链接项的 div：divid="tagCloud"ulliahref="#"javascript/a/liliahref="#"html /a/liliahref="#"css/a/li/ul/div接下来，我们向页面添加 CSS 样式。 由于超链接会像标签云一样在页面内旋转浮动，所以我们需要将标签设置为position:absolute# tagCloud作为标签云的容器，需要将高度和长度设置为position:relative。 主要CSS如下，比较简单：#tagCloudheight:300px;width:600px;position:relative;margin:overflow:hidden;position:absolute;text-decoration:none;color:#0B61A4;text-shadow: #66A3D21px -1px1px; 添加 CSS 后的 Html 是什么样子的。 添加CSS后的Html效果如上图所示。 由于位置设置为绝对位置并且未设置左侧/顶部，因此所有超链接都被挤在一起。
接下来，需要Javascript。 简单来说，就是用Javascript不断地设置每个超链接的左侧/顶部，使所有的超链接不断地相互连接css标签云，看起来就像漂浮在空中的标签云。 Javascript3D 标签云首先为我们提供了我们期望的 3D 标签云的外观。 这里我只是打算用Javascript制作一个简单的3D标签元素，不使用canvas等新的Html5东西，所以虽然我们的3D是一个非常“伪”的3D。 将所有超链接元素放在一个环上。 有些元素的字体较大，透明度较低，因此感觉更接近我们。 其他的字体较小，透明度较高，因此感觉很遥远。 我们离得更远，从而产生 3D 效果。 至于超链接元素的左/上值，它对应于我们坐标轴上的投影。 等等，这不是学校语文里的三角函数（单位圆上各线段的宽度）吗？ 我们根据超链接元素的数量将整个360度圆分成等份，然后得到每个元素对应的角度。 角度对应的余弦/正弦值就是元素位置的坐标。 您还可以基于此设置元素的字体和透明度。 假设某个元素的角度为α，那么它对应的值应该是： left：长度直径 top：高度直径 fontSize：普通字体大小 zIndex：固定值 注：正值css标签云，放大越大，不透明度越好：最后我们通过Javascriptfn(ms)的方法，循环不断的调用集合元素的各种样式，实现元素的连接。
我们将代码封装成一个简单的类型：Js标签云对应的Div标签 functionJsTagCloud(config) varclouddocument.getElementById(config.CloudId);this._cloudparseInt(this._getStyle(cloud,'width'));varparseInt( this. _getStyle(cloud,'height'));this.width 初始化 this._itemscloud.getElementsByTagName('a');this._countthis._items.length;this._angle(this._count);this._radian360);this .step获取对象 StyleJsTagCloud.prototype._getStylefunction(elem,name) return window.getCompulatedStylewindow.getCompulatedStyle(elem,null)[name] 渲染标签云 JsTagCloud.prototype._rendervaritemthis._items[i];varthisRadianthis.step;varsinVMath.sin(thisRadian ) ;varcosVSet CSS 内联样式 item.style.left'px';item.style.top'px';item.style.fontSize'pt';item.style.zIndex2000;item.style.opacity0.6;item .style. filter 启动 JsTagCloud.prototype.startsetInterval(function(who)returnfunction() 来获取 DOM 元素的 Style 属性值。
这里需要获取#tagwidth/height，IE通过elem.currentStyle.AttributeName获取，其他标准浏览器通过window.getComputedStyle()函数获取。 这里写了一个_getStyle()函数来获取它。 Math.cos()函数的参数是弧度（忘记了？），所以需要先将角度转换为弧度。 设置CSSStyle内联样式时，需要考虑浏览器兼容性。 例如透明度标准浏览器直接使用style.opacity形参，而IE则需要使用过滤器来设置。 好了，我们的小泛型完成后，只需要vartagCloudnewJsTagCloud({CloudId:'tagCloud'tagCloud.start();)来运行即可。
