Gegenstand:
1. Es wurde festgestellt, dass nicht genügend Instanzen vorhanden waren und der Schwebeflug (zur Lösung) nicht möglich war.
2. Das System kann die Farbe nicht zufällig und automatisch einfärben (noch zu lösen)
Erstens eine hochkarätige Website mit Tag-Cloud – die Foto-Sharing-Website Flickr. Der Designer der Tag-Cloud ist der Interaktionsdesigner Stewart Butterfield. Später wurde die Tag-Cloud von Websites wie del und Technorati übernommen.
Die erste veröffentlichte Erscheinung einer Tag-Cloud (oder zumindest einer gewichteten Liste), die sich hauptsächlich auf „unterschwellige Dateien“ beschränkte, war in Douglas Couplands Microserfs (1995). In „Lester Leaps Out“ verwendet der walisische Dichter Landau dieselbe Logik, um Text zu gewichten und eine grafische Textkarte zur Beschreibung von Jazzmusik zu erstellen. Das Gedicht erscheint in seinem Buch Magic Fire Chevrolet (1980).
HTML-Code-Snippet
Kopieren Sie den Codecode wie folgt:
<!DOCTYPE html>
<html>
<Kopfzeilen>
<meta charset=utf-8 />
<title>3D-Kugeletikett</title>
<link rel="stylesheet" type="text/css" href="3Dtag_style.css" />
<script type="text/javascript" src="3Dtag.js"></script>
</headers>
<Körper>
<div id="div1">
<a href="#">Obstkategorien</a>
<a href="#">Apple</a>
<a href="#">Banane</a>
<a href="#">Wassermelone</a>
<a href="#">3Dtag</a>
<a href="#">SEO</a>
<a href="#">Drachenfrucht</a>
<a href="#">Birne</a>
<a href="#">Kugelförmig</a>
<a href="#">CSS</a>
<a href="#">PHP</a>
<a href="#">Java</a>
<a href="#">Erben</a>
<a href="#">C#</a>
<a href="#">OOP</a>
<a href="#">Sprachkategorien</a>
<a href="#">Tomaten</a>
<a href="#">C++</a>
<a href="#">C</a>
<a href="#">Tomate</a>
<a href="#">Demo</a>
</div>
<p>3D-Kugel-Tag</p>
</body></html>
Javascript-Snippet
Kopieren Sie den Codecode wie folgt:
var radius = 120; //Rotationsradius;
var dtr = Math.PI/180;
vard=300;
var mcList = [];
var active = false;
var lasta = 1;
var lastb = 1;
var distr = true;
var tspeed=10;
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++)
{
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, 30);
};
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);
}
CSS-Code-Snippet
Kopieren Sie den Codecode wie folgt:
body {Hintergrund: #000 url(index.png) no-repeat center 230px;}
#div1 {position:relative; width:450px; height: 20px auto 0;
#div1 a {position:absolute; left:0px;
#div1 a:hover {border: 1px solid #eee; background: #000;
#div1 .blue {color:blue;}
#div1 .red {color:red;}
#div1 .gelb {color:gelb;}
p {font: 16px Microsoft YaHei; text-align: center;
pa { Schriftgröße: 14px; Farbe: #ba0c0c }
pa:hover { Farbe: rot }