一个很美观的标签云效果,纯DIV+CSS布局

废话不多说了,直接看效果:

一个很美观的标签云效果,纯DIV+CSS布局_第1张图片


html代码:





无标题文档






我的CSDN博客地址:http://blog.csdn.net/escdelete



css代码:

body {
	background: #000000 url(index.png) no-repeat center 230px;
}
#div1 {
	position:relative;
	width:450px;
	height:450px;
	margin: 20px auto 0;
}
#div1 a {
	position:absolute;
	top:0px;
	left:0px;
	font-family: Microsoft YaHei;
	color:#fff; 
	font-weight:bold;
	text-decoration:none;
	padding: 3px 6px;
}
#div1 a:hover {
	border: 1px solid #eee;
	background: #000;
}
#div1 .blue {
	color:blue;
}
#div1 .red {
	color:red;
}
#div1 .yellow {
	color:yellow;
}

p {
	font: 16px Microsoft YaHei;
	text-align: center;
	color: #ba0c0c;
}
p a {
	font-size: 14px;
	color: #ba0c0c;
}
p a:hover {
	color: red;
}


js代码:

var radius = 120;
var dtr = Math.PI/180;
var d=300;

var mcList = [];
var active = false;
var lasta = 1;
var lastb = 1;
var distr = true;
var tspeed=10;
var size=250;

var mouseX=0;
var mouseY=0;

var howElliptical=1;

var aA=null;
var oDiv=null;

window.οnlοad=function ()
{
	var i=0;
	var oTag=null;
	
	oDiv=document.getElementById('div1');
	
	aA=oDiv.getElementsByTagName('a');
	
	for(i=0;ivItem2.cz)
			{
				return -1;
			}
			else if(vItem1.cz



你可能感兴趣的:(一个很美观的标签云效果,纯DIV+CSS布局)