`

3d标签云

javascripttag3d标签云 
阅读更多 
/**
 * @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;
}
分享到：
| jquery autocomplete 与struts2 json插件结 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics