A veces busco información en Internet y veo el efecto de rotación de palabras clave en los blogs de otras personas, lo cual creo que es bastante bueno. Así que busqué en Internet su implementación y, bueno, lo escribí yo mismo.
HTML:
Copie el código de código de la siguiente manera:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; charset=gb2312" />
<título></título>
<enlace rel="hoja de estilo" href="css/style.css" />
<script tipo="text/javascript" src="js/lrtk.js"></script>
</cabeza>
<cuerpo>
<!-- El código comienza -->
<div id="div1">
<a >formulario web Asp.net</a>
<a >Asp.net mvc</a>
<a >EF</a>
<a >Castillo</a>
<a >Spring.net</a>
<a >NHibernar</a>
<a >WCF</a>
<a >WPF</a>
<a >AOP</a>
<a >COI</a>
<a >SQL</a>
<a >Javascript</a>
<a >JQuery</a>
<a >KendoUI</a>
</div>
</cuerpo>
</html>
CSS:
Copie el código de código de la siguiente manera:
#div1{alto:400px;ancho:450px; posición:relativa; margen:10px automático;}
#div1 a{posición:absoluta;arriba:0px;izquierda:0px;font-weight:bold;padding:3px 6px; color:negro;decoración del texto: ninguno;}
#div1 a:hover{borde:1px sólido #eee;fondo:#ccc;border-radius:5px;}
Como son palabras clave, pensé que estaría bien darles diferentes colores. Inicialice una matriz para almacenar valores de color y luego asígnelos aleatoriamente a cada etiqueta.
Copie el código de código de la siguiente manera:
var colores = ["#FF60AF","#9F35FF","#FF2D2D","#6C6C6C","#003D79","#00AEAE","#019858"];
var rand = Math.ceil(Math.random()*6);
aA[i].style.color=colores[rand];
JS:
Copie el código de código de la siguiente manera:
radio var = 100;
var dtr = Matemáticas.PI/180;
vard=300;
var mcList = [];
var activo = falso;
var lasta = 1;
var últimob = 1;
var distr = verdadero;
var tvelocidad=2;
tamaño var=250;
var ratónX=0;
var ratónY=0;
var cómoElliptical=1;
var aA=nulo;
var oDiv=null;
ventana.onload=función ()
{
var i=0;
var oTag=null;
oDiv=document.getElementById('div1');
aA=oDiv.getElementsByTagName('a');
para(i=0;i<aA.length;i++)
{
var colores = ["#FF60AF","#9F35FF","#FF2D2D","#6C6C6C","#003D79","#00AEAE","#019858"];
var rand = Math.ceil(Math.random()*6);
aA[i].style.color=colores[rand];
oEtiqueta={};
oTag.offsetWidth=aA[i].offsetWidth;
oTag.offsetHeight=aA[i].offsetHeight;
mcList.push(oTag);
}
senoCoseno( 0,0,0 );
posiciónTodos();
oDiv.onmouseover=función ()
{
activo=verdadero;
};
oDiv.onmouseout=función ()
{
activo=falso;
};
oDiv.onmousemove=función (ev)
{
var oEvento=ventana.evento || ev;
mouseX=oEvent.clientX-(oDiv.offsetLeft+oDiv.offsetWidth/2);
mouseY=oEvent.clientY-(oDiv.offsetTop+oDiv.offsetHeight/2);
ratónX/=5;
ratónY/=5;
};
setInterval(actualización, 10);
};
actualización de función()
{
var a;
var b;
si (activo)
{
a = (-Math.min( Math.max( -mouseY, -size ), tamaño ) / radio ) * tspeed;
b = (Math.min( Math.max( -mouseX, -size ), tamaño ) / radio ) * tspeed;
}
demás
{
a = última * 0,98;
b = últimob * 0,98;
}
dura=a;
últimob=b;
si(Math.abs(a)<=0.01 && Math.abs(b)<=0.01)
{
devolver;
}
varc=0;
senoCoseno(a,b,c);
para(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;
varry2=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;
por=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);
}
hacerPosición();
clasificación de profundidad();
}
función profundidadOrdenar()
{
var i=0;
var aTmp=[];
para(i=0;i<aA.length;i++)
{
aTmp.push(aA[i]);
}
aTmp.sort
(
función (vItem1, vItem2)
{
si(vItem1.cz>vItem2.cz)
{
devolver -1;
}
de lo contrario si (vItem1.cz<vItem2.cz)
{
devolver 1;
}
demás
{
devolver 0;
}
}
);
para(i=0;i<aTmp.length;i++)
{
aTmp[i].style.zIndex=i;
}
}
posición de la funciónTodos()
{
varfi=0;
var theta=0;
var max=mcList.longitud;
var i=0;
var aTmp=[];
var oFragment=document.createDocumentFragment();
//Clasificación aleatoria
para(i=0;i<aA.length;i++)
{
aTmp.push(aA[i]);
}
aTmp.sort
(
función()
{
return Math.random()<0.5?1:-1;
}
);
para(i=0;i<aTmp.length;i++)
{
oFragment.appendChild(aTmp[i]);
}
oDiv.appendChild(oFragmento);
para(var i=1; i<max+1; i++){
si(distribuir)
{
phi = Math.acos(-1+(2*i-1)/max);
theta = Math.sqrt(max*Math.PI)*phi;
}
demás
{
phi = Math.random()*(Math.PI);
theta = Math.random()*(2*Math.PI);
}
// Transformación de coordenadas
mcList[i-1].cx = radio * Math.cos(theta)*Math.sin(phi);
mcList[i-1].cy = radio * Math.sin(theta)*Math.sin(phi);
mcList[i-1].cz = radio * 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';
}
}
función hacerPosición()
{
var l=oDiv.offsetWidth/2;
var t=oDiv.offsetHeight/2;
para(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;
}
}
función senoCoseno(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);
}
Finalmente, eche un vistazo al efecto: