Asunto:
1. Se encontró que no había instancias suficientes y no se podían desplazar (por resolver)
2. El sistema no puede colorear de forma aleatoria y automática (por resolver)
En primer lugar, un sitio web de alto perfil que utiliza una nube de etiquetas: el sitio web para compartir fotografías Flickr. El diseñador de la nube de etiquetas es el diseñador de interacción Stewart Butterfield. Posteriormente, sitios web como del y Technorati adoptaron la nube de etiquetas.
La primera aparición publicada de una nube de etiquetas (o al menos una lista ponderada) que se reducía principalmente a "archivos subliminales" fue en Microserfs (1995) de Douglas Coupland. En Lester Leaps Out, el poeta galés Landau, utiliza la misma lógica para ponderar el texto y crear un mapa de texto gráfico para describir la música jazz. El poema aparece en su libro Magic Fire Chevrolet (1980).
fragmento de código html
Copie el código de código de la siguiente manera:
<!DOCTYPE html>
<html>
<encabezados>
<meta juego de caracteres=utf-8 />
<title>Etiqueta esférica 3D</title>
<enlace rel="hoja de estilo" tipo="texto/css" href="3Dtag_style.css" />
<script tipo="text/javascript" src="3Dtag.js"></script>
</encabezados>
<cuerpo>
<div id="div1">
<a href="#">Categorías de frutas</a>
<a href="#">manzana</a>
<a href="#">Plátano</a>
<a href="#">Sandía</a>
<a href="#">etiqueta 3D</a>
<a href="#">SEO</a>
<a href="#">Fruta del dragón</a>
<a href="#">Pera</a>
<a href="#">Esférico</a>
<a href="#">CSS</a>
<a href="#">PHP</a>
<a href="#">Java</a>
<a href="#">Heredar</a>
<a href="#">C#</a>
<a href="#">POO</a>
<a href="#">Categorías de idiomas</a>
<a href="#">Tomates</a>
<a href="#">C++</a>
<a href="#">C</a>
<a href="#">Tomate</a>
<a href="#">demostración</a>
</div>
<p>Etiqueta esférica 3D</p>
</cuerpo></html>
fragmento de javascript
Copie el código de código de la siguiente manera:
var radio = 120; //Radio de rotación;
var dtr = Matemáticas.PI/180;
vard=300;
var mcList = [];
var activo = falso;
var lasta = 1;
var últimob = 1;
var distr = verdadero;
var tspeed=10;
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++)
{
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, 30);
};
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);
}
Fragmento de código CSS
Copie el código de código de la siguiente manera:
cuerpo {fondo: #000 url(index.png) centro sin repetición 230px;}
#div1 {posición: relativa; ancho: 450 px; alto: 450 px; margen: 20 px auto 0;
#div1 a {posición:absoluta; arriba:0px; izquierda:0px; familia de fuentes: Microsoft YaHei; color:#fff; negrita;
#div1 a:hover {borde: 1px sólido #eee; fondo: #000;
#div1 .azul {color:azul;}
#div1 .rojo {color:rojo;}
#div1 .amarillo {color:amarillo;}
p {fuente: 16px Microsoft YaHei; alineación de texto: centro;
pa {tamaño de fuente: 14px; color: #ba0c0c }
pa: flotar { color: rojo }