3d标签云

来源：互联网发布：mac电脑输入法中英切换编辑：程序博客网时间：2024/04/28 00:44

/** * @author myemptynae */function JsTagCloud(config) {// 对对的 Div 标标     var cloud = document.getElementById(config.CloudId);this._cloud = cloud;// w, h 是 Div 宽的高     var w = parseInt(this._getStyle(cloud, 'width'));var h = parseInt(this._getStyle(cloud, 'height'));this.width = (w - 100) / 2;this.height = (h - 50) / 2;// 初始化this._items = cloud.getElementsByTagName('a');this._count = this._items.length;this._angle = 360 / (this._count);this._radian = this._angle * (2 * Math.PI / 360);this.step = 0; }//获对取象 StyleJsTagCloud.prototype._getStyle = function(elem, name) {return window.getComputedStyle ? window.getComputedStyle(elem, null)[name]: elem.currentStyle[name];};//标标渲染云JsTagCloud.prototype._render = function() { for (var i = 0; i < this._count; i++) {var item = this._items[i];var thisRadian = (this._radian * i) + this.step;var sinV = Math.sin(thisRadian);var cosV = Math.cos(thisRadian);// 设置 CSS 联联内式item.style.left = (sinV * this.width) + this.width + 'px';item.style.top = this.height + (cosV * 50) + 'px';item.style.fontSize = cosV * 10 + 20 + 'pt';item.style.zIndex = cosV * 1000 + 2000;item.style.opacity = (cosV / 2.5) + 0.6;item.style.filter = " alpha(opacity=" + ((cosV / 2.5) + 0.6) * 100 + ")";}     this.step += 0.007; };//开始 JsTagCloud.prototype.start = function() { setInterval (function(who) { return function() {           who._render();  };     }(this), 20); };

<html xmlns="http://www.w3.org/1999/xhtml">    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        <title>无标题文档</title><link rel="stylesheet" type="text/css" href="tg.css" /><script src="tg.js"></script><script>window.onload=function (){var tagCloud = new JsTagCloud({ CloudId: 'tagCloud' }); tagCloud.start();};</script>    </head>    <body>            <div id="tagCloud">                                        <a href="#">javascript</a>                                 <a href="#">html</a>                    <a href="#">css</a>                               </div>    </body></html>

#tagCloud {    height: 300px;    width: 600px;    position: relative;    margin: 0;    overflow: hidden;}#tagCloud a {    position: absolute;    text-decoration: none;    color: #0B61A4;    text-shadow: #66A3D2 1px -1px 1px;}

3dTagCloud.zip (1.7 KB)
下载次数: 8