Beispielcode für den sphärischen Rotationseffekt des JS-Schlüsselworts

Autor：Eve Cole Aktualisierungszeit：2025-01-28 15:24:01

Manchmal suche ich im Internet nach Informationen und sehe den Keyword-Rotationseffekt auf den Blogs anderer Leute, was ich ziemlich gut finde. Also habe ich im Internet nach seiner Implementierung gesucht und OK, ich habe es selbst geschrieben.

HTML:

Kopieren Sie den Codecode wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<Kopf>

</head>

<Körper>

<a >Asp.net-Webformular</a>

<a >Schloss</a>

<a >Spring.net</a>

<a >NHibernate</a>

<a >Javascript</a>

<a >Jquery</a>

<a >KendoUI</a>

</div>

</body>

</html>

CSS:

Kopieren Sie den Codecode wie folgt:

#div1{height:400px;width:450px; position:relative;margin:10px auto;}

#div1 a{position:absolute;top:0px;left:0px;font-weight:bold;padding:3px 6px;text-decoration: none;}

#div1 a:hover{border:1px solid #eee;background:#ccc;border-radius:5px;}

Da es sich um Schlüsselwörter handelt, dachte ich, es wäre cool, ihnen verschiedene Farben zu geben. Initialisieren Sie ein Array zum Speichern von Farbwerten und weisen Sie diese dann zufällig jeder Beschriftung zu.

Kopieren Sie den Codecode wie folgt:

var farben = ["#FF60AF", #9F35FF, "#FF2D2D", "#6C6C6C", "#003D79", "#00AEAE", "#019858"];

var rand = Math.ceil(Math.random()*6);

aA[i].style.color=colors[rand];

JS:

Kopieren Sie den Codecode wie folgt:

var Radius = 100;

var dtr = Math.PI/180;

vard=300;

var mcList = [];

var active = false;

var lasta = 1;

var lastb = 1;

var distr = true;

var tspeed=2;

Var-Größe=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;i<aA.length;i++)

{

var farben = ["#FF60AF", #9F35FF, "#FF2D2D", "#6C6C6C", "#003D79", "#00AEAE", "#019858"];

var rand = Math.ceil(Math.random()*6);

aA[i].style.color=colors[rand];

oTag={};

oTag.offsetWidth=aA[i].offsetWidth;

oTag.offsetHeight=aA[i].offsetHeight;

mcList.push(oTag);

}

SinusCosinus( 0,0,0 );

positionAll();

oDiv.onmouseover=function ()

{

aktiv=wahr;

};

oDiv.onmouseout=function ()

{

aktiv=falsch;

};

oDiv.onmousemove=Funktion (ev)

{

var oEvent=window.event ||. ev;

mouseX=oEvent.clientX-(oDiv.offsetLeft+oDiv.offsetWidth/2);

mouseY=oEvent.clientY-(oDiv.offsetTop+oDiv.offsetHeight/2);

mausX/=5;

MausY/=5;

};

setInterval(update, 10);

};

Funktion update()

{

var a;

var b;

if(aktiv)

{

a = (-Math.min( Math.max( -mouseY, -size ), size ) / radius ) * tspeed;

b = (Math.min( Math.max( -mouseX, -size ), size ) / radius ) * tspeed;

}

anders

{

a = lasta * 0,98;

b = lastb * 0,98;

}

lasta=a;

lastb=b;

if(Math.abs(a)<=0,01 && Math.abs(b)<=0,01)

{

zurückkehren;

}

var c=0;

SinusCosinus(a,b,c);

for(var j=0;j<mcList.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*ca;

var rx2=rx1*cb+rz1*sb;

var ry2=ry1;

var rz2=rx1*(-sb)+rz1*cb;

var rx3=rx2*cc+ry2*(-sc);

var ry3=rx2*sc+ry2*cc;

var rz3=rz2;

mcList[j].cx=rx3;

mcList[j].cy=ry3;

mcList[j].cz=rz3;

per=d/(d+rz3);

mcList[j].x=(howElliptical*rx3*per)-(howElliptical*2);

mcList[j].y=ry3*per;

mcList[j].scale=per;

mcList[j].alpha=per;

mcList[j].alpha=(mcList[j].alpha-0.6)*(10/6);

}

doPosition();

DepthSort();

}

Funktion DepthSort()

{

var i=0;

var aTmp=[];

for(i=0;i<aA.length;i++)

{

aTmp.push(aA[i]);

}

aTmp.sort

(

Funktion (vItem1, vItem2)

{

if(vItem1.cz>vItem2.cz)

{

return -1;

}

sonst if(vItem1.cz<vItem2.cz)

{

Rückgabe 1;

}

anders

{

0 zurückgeben;

}

);

for(i=0;i<aTmp.length;i++)

{

aTmp[i].style.zIndex=i;

}

Funktion positionAll()

{

varphi=0;

var theta=0;

var max=mcList.length;

var i=0;

var aTmp=[];

var oFragment=document.createDocumentFragment();

//Zufällige Sortierung

for(i=0;i<aA.length;i++)

{

aTmp.push(aA[i]);

}

aTmp.sort

(

Funktion()

{

return Math.random()<0.5?1:-1;

}

);

for(i=0;i<aTmp.length;i++)

{

oFragment.appendChild(aTmp[i]);

}

oDiv.appendChild(oFragment);

for(var i=1; i<max+1; i++){

if(distr)

{

phi = Math.acos(-1+(2*i-1)/max);

theta = Math.sqrt(max*Math.PI)*phi;

}

anders

{

phi = Math.random()*(Math.PI);

theta = Math.random()*(2*Math.PI);

}

//Koordinatentransformation

mcList[i-1].cx = Radius * Math.cos(theta)*Math.sin(phi);

mcList[i-1].cy = radius * Math.sin(theta)*Math.sin(phi);

mcList[i-1].cz = Radius * Math.cos(phi);

aA[i-1].style.left=mcList[i-1].cx+oDiv.offsetWidth/2-mcList[i-1].offsetWidth/2+'px';

aA[i-1].style.top=mcList[i-1].cy+oDiv.offsetHeight/2-mcList[i-1].offsetHeight/2+'px';

}

Funktion doPosition()

{

var l=oDiv.offsetWidth/2;

var t=oDiv.offsetHeight/2;

for(var i=0;i<mcList.length;i++)

{

aA[i].style.left=mcList[i].cx+l-mcList[i].offsetWidth/2+'px';

aA[i].style.top=mcList[i].cy+t-mcList[i].offsetHeight/2+'px';

aA[i].style.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px';

aA[i].style.filter="alpha(opacity="+100*mcList[i].alpha+")";

aA[i].style.opacity=mcList[i].alpha;

}

Funktion SinusCosinus(a, b, c)

{

sa = Math.sin(a * dtr);

ca = Math.cos(a * dtr);

sb = Math.sin(b * dtr);

cb = Math.cos(b * dtr);

sc = Math.sin(c * dtr);

cc = Math.cos(c * dtr);

}

Werfen Sie abschließend noch einen Blick auf die Wirkung: