/** * @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.οnlοad=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;
}