Exemple de code pour l'effet de rotation sphérique du mot-clé JS

Auteur：Eve Cole Date de mise à jour：2025-01-28 15:24:01

Parfois, je recherche des informations sur Internet et je constate l'effet de rotation des mots clés sur les blogs d'autres personnes, ce que je trouve plutôt positif. J’ai donc cherché sur Internet son implémentation, et OK, je l’ai écrit moi-même.

HTML :

Copiez le code comme suit :

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

<tête>

</tête>

<corps>

<a >Formulaire Web Asp.net</a>

<a >Château</a>

<a >Spring.net</a>

<a >NHiberner</a>

<a >Javascript</a>

<a >Jquery</a>

<a >KendoUI</a>

</div>

</corps>

</html>

CSS :

Copiez le code comme suit :

#div1{hauteur:400px;largeur:450px; position:relative;marge:10px auto;}

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

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

Puisqu’il s’agit de mots-clés, j’ai pensé que ce serait sympa de leur donner des couleurs différentes. Initialisez un tableau pour stocker les valeurs de couleur, puis attribuez-les de manière aléatoire à chaque étiquette.

Copiez le code comme suit :

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

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

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

JS :

Copiez le code comme suit :

rayon variable = 100 ;

var dtr = Math.PI/180 ;

vard=300 ;

var mcListe = [];

var actif = faux ;

var dernière = 1 ;

var dernierb = 1;

var distribution = vrai ;

var tvitesse=2;

taille variable = 250 ;

var sourisX=0;

var sourisY=0;

var commentElliptique=1;

var aA = nul ;

var oDiv = nul ;

window.onload=fonction ()

{

var je = 0 ;

var oTag=null;

oDiv=document.getElementById('div1');

aA=oDiv.getElementsByTagName('a');

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

{

var couleurs = ["#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 );

positionTout();

oDiv.onmouseover=fonction ()

{

actif = vrai ;

} ;

oDiv.onmouseout=fonction ()

{

actif=faux ;

} ;

oDiv.onmousemove=fonction (ev)

{

var oEvent=window.event ||

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

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

sourisX/=5;

sourisY/=5;

} ;

setInterval(mise à jour, 10);

} ;

fonction mise à jour()

{

var une;

varb;

si (actif)

{

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

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

}

autre

{

a = dernière * 0,98 ;

b = dernier b * 0,98 ;

}

dernier=a;

dernierb=b;

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

{

retour;

}

var c = 0 ;

sinusCosinus(a,b,c);

pour(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;

varrz3=rz2;

mcList[j].cx=rx3;

mcList[j].cy=ry3;

mcList[j].cz=rz3;

par=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();

profondeurTri();

}

fonction profondeurSort()

{

var je = 0 ;

var aTmp=[];

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

{

aTmp.push(aA[i]);

}

aTmp.sort

(

fonction (vItem1, vItem2)

{

si(vItem1.cz>vItem2.cz)

{

renvoie -1 ;

}

sinon si(vItem1.cz<vItem2.cz)

{

renvoyer 1 ;

}

autre

{

renvoie 0 ;

}

);

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

{

aTmp[i].style.zIndex=i;

}

fonction positionTout()

{

varphi=0;

var thêta=0 ;

var max=mcList.length;

var je = 0 ;

var aTmp=[];

var oFragment=document.createDocumentFragment();

//Tri aléatoire

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

{

aTmp.push(aA[i]);

}

aTmp.sort

(

fonction()

{

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

}

);

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

{

oFragment.appendChild(aTmp[i]);

}

oDiv.appendChild(oFragment);

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

si (distribution)

{

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

thêta = Math.sqrt(max*Math.PI)*phi;

}

autre

{

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

thêta = Math.random()*(2*Math.PI);

}

//Transformation de coordonnées

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

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

mcList[i-1].cz = rayon * 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';

}

fonction doPosition()

{

var l=oDiv.offsetWidth/2;

var t=oDiv.offsetHeight/2;

pour(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;

}

fonction 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);

}

Enfin, jetez un œil à l’effet :