javascript实现动态标签云

今天上学校的图书馆，看到了一个好玩的东西，特意百度了下，发现叫做"标签球",效果图为：

直接代码如下：

CSS:

# div1 {位置：相对宽度宽度：350像素高度：350 pxborder:1px固体# 000;余量： 20px自动0;} # div 1 a { position : absolutetop :0 pxleft :0 pxfont-family :微软雅黑；color: # 000font-weight :加粗；文本装饰：无；padding: 3px 6px } # div 1 a :悬停{边框： 1px实心# eee背景： # FFF；}#div1 .蓝色{ color:blue}#div1 .红色{ color:red}#div1 .绿色HTML:

div id='div1' a href='# '标签云/a a href=' # ' class=' red ' PHP/a href=' # '瀑布流/a a a href=' # ' Tab/a a href=' # ' class=' blue '流体布局/a a a href=' # ' SEO/a a href=' # ' class=' red '彩蛋/a a href=' # ' class=' green ' JavaScript/a a href=' # ' meov/a a href=' # ' class=' red ' CSS/a href=' # ' ASP。net/a href=' # ' class=' blue '蓝色经典/a a href=' # ' OOP/a href=' # ' class=' red ' Android/a href=' # ' class=' blue '妙味茶馆/a a a href=' # '对话框/a a a href=' # ' class=' blue '淘客/a href=' # ' Pin/a href=' # '微博/a a href=' # ' class=' green ' iphone/a/div js

$(文档)。ready(function() { $('#div1 ')).风向袋({ radius:120，speed :10 })；});首先得写好布局，最外层差异样式位置设置为亲戚

内层元素位置为绝对的，这样才能形成效果，顶部为0,左侧为0先导入jquery文件，再导入相应的插件文件获取$('#xxx ')元素，并调用windstagball()函数半径是标签球的变径大小速度顾名思义就是运动的速度。

附上射流研究…插件

定义变量半径=120;var DTR=Math.PI/180;var d=300；var McList=[]；var active=false var lasta=1；var lastb=1；var distr=true var ts speed=10 var size=250 var Mousex=0；var Mousey=0；var howellioptical=1；var aA=nullvar oDiv=nullwindow。onload=function(){ var I=0；var oTag=nulloDiv=document。getelementbyid(' div 1 ')；aA=Odiv。GetElementsBytagname(' a ')；for(I=0；IAA . lengthi){ OTag={ }；奥塔格。offset witts=Aa[I].offsetWidthotag。偏移量ThEight=Aa[I].偏右；麦克利斯特。推送(OTag)；}正弦余弦(0,0,0);positionAll()；奥迪夫。onmouseover=function(){ active=true；};奥迪夫。onmouseout=function(){ active=false；};奥迪夫。onmousemove=function(ev){ var oEvent=window。事件| | evmouseX=oevent。clientx-(odiv。offsetleft odiv。offset witth/2)；mouseY=oevent。clienti-(odiv。offsettop odiv。偏右/2)；mouseX/=5；mouseY/=5；};setInterval(更新，30);};函数update(){ var a；风险值b；if(active){ a=(-math。min(数学。最大(-mouseY，-size)，大小)/半径)* t速度；b=(Math.min(Math.max(-mouseX，-size)，size ) /半径)* t速度；} else { a=lasta * 0.98 b=lastb * 0.98 } lasta=a；lastb=b；if(数学。ABS(a)=0.01数学。ABS(b)=0.01){退货；} var c=0；正弦余弦(a、b、c)；for(var j=0；JM clist . length j){ var rx1=McList[j].CX；var ry1=mcList[j].cy*ca mcList[j].cz *(sa)；var rz1=mcList[j].cy*sa mcList[j].cz * cavar rx2=rx1 * CB rz1 * sbvar ry2=ry1 var rz2=rx1 *(sb)rz1 * CB；var rx3=rx2 * cc ry2 *(sc-sc)；var ry3=rx2 * sc ry2 * ccvar rz3=rz2麦克利斯特[j].cx=rx3麦克利斯特[j].cy=ry3麦克利斯特[j].cz=rz3per=d/(d rz3)；麦克利斯特[j].x=(howelli optical * rx3 * per)-(howelli optical * 2)；麦克利斯特[j].y=ry3 * per麦克利斯特[j].比例=每麦克利斯特[j].alpha=per麦克利斯特[j].=(McList[j])，-0.6)*(10/6)；} DopPosition()；depthSort()；}函数depthSort(){ var I=0；var ATMP=[]；for(I=0；ATMP。push(Aa[I])；}aTmp.sort(函数(vItem1，vite m2){ if(vite m1。czvite m2。cz){ return-1；} else if(vite m1。czvite m2。cz){ return 1；} else { return 0；}});for(I=0；aTmp。风格。zindex=I；} }函数positionAll(){ var phi=0；var=0；var max=McList . length var I=0；var ATMP=[]；var oFragment=document。createdocumentfragment()；//随机排序for(I=0；ATMP。push(Aa[I])；} atmp。sort(function(){ return math。随机()0.5？1:-1;});for(I=0；iatmp . lengthi){ of fragment。阑尾(ATMP[一])；} odiv。appendchild(of fragment)；for(var I=1；IMAX 1；I){ if(distr){ phi=math。acos(-1(2 * I-1)/max)；=数学。sqrt(最大值*数学.PI)*；}else{phi=Math.random()*(Math .PI)；=数学。随机()*(2 *数学.PI)；}//坐标变换麦克利斯特[i-1].cx=半径*数学cos()*数学sin()；麦克利斯特[i-1].cy=半径*数学sin()*数学sin()；麦克利斯特[i-1].cz=半径*数学。cos()；aA[i-1].style.left=mcList[i-1].CX奥迪夫。偏移/2-McList[I-1].offset withts/2 ' px '；aA[i-1].style.top=mcList[i-1].cy Odiv。偏置灯/2-McList[I-1].偏右/2 ' px '；} }函数doPosition(){ var l=odiv。offset withts/2；var t=Odiv。偏移量ThEight/2；for(var I=0；imclist . lengthi){ Aa[I]. style . left=McList[I].cx l-mcList[i].offset withts/2 ' px '；aA[i].style.top=mcList[i].cy t-mcList[i].偏右/2 ' px '；aA[I]。风格。字体大小=数学。ceil(12 * McList[I]).比例尺/2)8 ' px '；aA[i].style.filter='alpha(不透明度=' 100*mcList[i]).alpha ')'；aA[i].style.opacity=mcList[i].阿尔法；} }函数正弦余弦，b，c){ sa=数学。罪恶(DTR)；ca=数学。cos(a * DTR)；sb=数学。罪恶(b * DTR)；CB=数学。cos(b * DTR)；sc=数学。辛(DTR)；cc=数学。cos(c * DTR)；}