JS关键词球形旋转效果示例代码

有时上网查资料，看到别人的博客上有关键字旋转的效果，觉得蛮不错的。于是网上搜索了一下它的实现，好吧，自己动手写写HTML:复制代码代码如下：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=GB 2312 '/title/title link rel='样式表href=' CSS/style。CSS '/脚本类型=' text/JAVAScript ' src=' http : js/lrtk。js /脚本/head dy！-代码开始-div id=' div 1 ' a Asp.net网页表格/aa Asp.net MVC/aa英孚/aa卡塞尔/aa Spring.net/aa NHibernate/aa WCF/aa WPF/aa AOP/aa IoC/aa SQL/aa Javascript/aa Jquery/aa KendoUI/a/div/body/html CSS :复制代码代码如下： # div1 { height:400px宽度宽度：450像素位置：相对；margin:10px汽车；} # div 1 a { position : absolutetop :0 pxleft :0 pxfont-weight : bold；padding:3px 6px颜色：黑色；文本装饰：无；} # div 1 a :悬停{边框：1 px实心# eee背景# cccborder-radius :5 px；}既然是关键字，我觉得给他们加上不同的颜色才够酷。初始化一个数组存放颜色值，然后再随机分配给各个标签。

复制代码代码如下：var colors=['#FF60AF '，' #9F35FF '，' # FF2D2D '，' #6C6C6C '，' #003D79 '，' #00AEAE '，' # 019858 ']；var rand=数学。天花板(数学。random()* 6)；aA[I]。风格。color=colors[rand]；JS:复制代码代码如下：var半径=100;var DTR=Math.PI/180;var d=300；var McList=[]；var active=false var lasta=1；var lastb=1；var distr=true var t speed=2；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){ var colors=[' # FF60AF '，' #9F35FF '，' # FF2D2D '，' #6C6C6C '，' #003D79 '，' #00AEAE '，' # 019858 ']；var rand=数学。天花板(数学。random()* 6)；aA[I]。风格。color=colors[rand]；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(更新，10);};函数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)；}最后看下效果