3d标签云

最新推荐文章于 2025-11-29 13:42:57 发布

原创最新推荐文章于 2025-11-29 13:42:57 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #tag #3d #标签云 #ViewUI

javascript 专栏收录该内容

2 篇文章

订阅专栏

/**
 * @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; 
}

//获对取象 Style
JsTagCloud.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;
}