Matter:
1. It is found that there are insufficient instances and cannot be hovered (to be solved)
2. The system cannot randomly and automatically color (to be solved)
First use the tag cloud A high-profile website---photo sharing website Flickr. The designer of the tag cloud is interaction designer Stewart Butterfield. Later, tag cloud was adopted by websites such as del and Technorati.
The first published appearance of a tag cloud (or at least a weighted list), which boils down to being primarily a "subliminal archive", was in Douglas Coupland's Microserfs (1995). In Lester Leaps Out, Welsh poet Landau, uses the same logic to weight text to create a graphic text map to describe jazz music. The poem appears in his book Magic Fire Chevrolet (1980).
html code snippet
3D spherical label
< ;link rel="stylesheet" type="text/css" href="3Dtag_style.css" />
3D spherical tag
Javascript code snippet
var radius = 120; //旋转半径;
var dtr = Math.PI/180;
var d=300;
var mcList = [];
var active = false;
load load = 1;
var lastb = 1;
var distr = true;
var tspeed=10;
var size=250;
var mouseX=0;
var mouseY=0;
var howElliptical=1;
var aA=zero;
var oTwo=zero;
window.onload=function ()
{
var i=0;
var oTag=null;
oDiv=document.getElementById('div1');
aA=oDiv.getElementsByTagName('a');
for(i=0;i
{
oTag={};
oTag.offsetWidth=aA[i].offsetWidth;
oTag.offsetHeight=aA[i].offsetHeight;
mcList.push(oTag);
}
sineCosine( 0,0,0 );
positionAll();
oDiv.onmouseover=function ()
{
active=true;
};
oDiv.onmouseout=function ()
{
active=false;
};
oDiv.onmousemove=function (ev)
{
var oEvent=window.event || house;
mouseX=oEvent.clientX-(oDiv.offsetLeft oDiv.offsetWidth/2);
mouseY=oEvent.clientY-(oDiv.offsetTop oDiv.offsetHeight/2);
mouseX/=5;
mouseY/=5;
};
setInterval(update, 30);
};
function update()
{
var a;
was b;
if(active)
{
a = (-Math.min( Math.max( -mouseY, -size ), size ) / radius ) * tspeed;
b = (Math.min( Math.max( -mouseX, -size ), size ) / radius ) * tspeed;
}
else
{
a = load * 0.98;
b = lastb * 0.98;
}
load=a;
loadb=b;
if(Math.abs(a)<=0.01 && Math.abs(b)<=0.01)
{
return;
}
var c=0;
cineCosine(a,b,c);
for(var j=0;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*(-cb) 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();
}
function depthSort()
{
var i=0;
var aTmp=[];
for(i=0;i{
aTmp.push(aA[i]);
}
aTmp.sort
(
function (vItem1, vItem2)
{
if(vItem1.cz>vItem2.cz)
{
return -1;
}
else if(vItem1.cz{
return 1
}
else
{
return 0;
}
}
);
for(i=0;i{
aTmp[i].style.zIndex=i;
}
}
function positionAll()
{
var phi=0;
var theta=0;
var max=mcList.length;
var i=0;
var aTmp=[];
var oFragment=document.createDocumentFragment();
//随机排序
for(i=0;i{
aTmp.push(aA[i]);
}
aTmp.sort
(
function ()
{
return Math.random()<0.5?1:-1;
}
);
for(i=0;i{
oFragment.appendChild(aTmp[i]);
}
oDiv.appendChild(oFragment);
for( var i=1; iif( distr )
{
phi = Math.acos(-1 (2*i-1) /max);
theta = Math.sqrt(max*Math.PI)*phi;
}
else
{
phi = Math.random()*(Math.PI);
theta = Math.random()*(2*Math.PI);
}
//坐标变换
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';
}
}
function doPosition()
{
var l=oDiv.offsetWidth/2;
var t=oDiv.offsetHeight/2;
for(var i=0;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;
}
}
function sineCosine( 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 Contents
body {background: #000 url(index.png) no-repeat center 230px;}
#div1 {position:relative; width:450px; height:450px; margin: 20px auto 0; }
#div1 a {position:absolute; top:0px; left:0px; font-family: Microsoft YaHei; color:#fff; font-weight:bold; text-decoration:none; padding: 3px 6px; }
#div1 a:hover {border: 1px solid #eee; background: #000; }
#div1 .blue {color:blue;}
#div1 .red {color:red;}
#div1 .yellow {color:yellow;}
p { font: 16px Microsoft YaHei; text-align: center; color: #ba0c0c; }
p a { font-size: 14px; color: #ba0c0c; }
p a:hover { color: red; }