js简单实现标签云效果实例

本文实例讲述了射流研究…简单实现标签云效果。分享给大家供大家参考。具体如下：

这里的Java脚本语言标签云，基于妙味课堂苗夫。射流研究…文件，非常流行的网页效果，在网页的右侧或左侧开辟一小块地方，用来显示热门的标签，形式就选择标签云吧，绝对酷哦，相信你也会喜欢。

运行效果如下图所示：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlejs标签云/title style body { background : # 000；} # div1 { position:relative宽度宽度：450像素高度：450 px余量： 20px自动0;} # div 1 a { position : absolutetop :0 pxleft :0 pxfont-family :微软雅黑；color : # ffffont-weight : bold；文本装饰：无；padding: 3px 6px } # div 1 a :悬停{边框： 1px实心# eee背景技术： # 000;}#div1 .蓝色{ color:blue}#div1 .红色{ color:red}#div1 .黄色{ color:yellow黄色黄色；}p { font: 16px微软雅黑；文本对齐：中心；color : # ba0c 0 c } p a { font-size : 14px；color : # ba0c 0 c } p a : hover { color : red } p a : hover { color : red；}/style脚本类型=' text/JavaScript ' src=' http : miov。JS '/script/headdydiv id=' div 1 ' a href=' # ' JS课程/a a a a href=' # ' class=' red '教程/a a href='# '回头一眸/a a href='# '精品/a a a a href=' # ' class=' blue '源码下载/a a a href=' # ' SEO/a a href=' # ' class=' red '特效/a a href='# '继承/a a a a href=' # class=' red '我们/a a href=' # ' class=' blue ' OOP/a href=' # ' XHTML/a href=' # ' W3C/a href=' # '石川/a a a href=' # ' class='黄色'人生如歌/a a href=' # ' blue/a/div/body/html miov。 射流研究…代码如下：

定义变量半径=120;var dtr=数学/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)；}mcList[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)；}希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。