javascript实现动态标签云_javascript技巧

直接代码如下：

CSS:

#div1 {position:relative; width:350px; height:350px; border:1px solid #000; margin: 20px auto 0; }
#div1 a {position:absolute; top:0px; left:0px; font-family: Microsoft YaHei; color:#000; font-weight:bold; text-decoration:none; padding: 3px 6px; }
#div1 a:hover {border: 1px solid #eee; background: #FFF; }
#div1 .blue {color:blue;}
#div1 .red {color:red;}
#div1 .green {color:green;}

HTML:

 标签云
 PHP
 瀑布流
 Tab
 流体布局
 SEO
 彩蛋
 JavaScript
 miaov
 CSS
 asp.net
 蓝色经典
 OOP
 Android
 妙味茶馆
 dialog
 淘客
 Pin
 微博
 IPhone

JS

首先得写好布局，最外层div样式position设置为relative

内层元素position为absolute，这样才能形成效果，top为0，left为0
先导入jquery文件，再导入相应的插件文件
获取$("#xxx")元素，并调用windstagball()函数，radius是标签球的变径大小，speed顾名思义就是运动的速度。

附上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.onload=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