Use JS to implement 3D spherical tag cloud sample code_javascript skills

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

Copy code The code is as follows: 3D spherical label &lt ;link rel="stylesheet" type="text/css" href="3Dtag_style.css" /> Fruit category Apple Banana 西瓜 3Dtag SEO Dragon Fruit Pear &lt ;a href="#">Spherical CSS Java Inheritance C# OOP Language Category Tomato C C Tomato demo 3D spherical tag

Javascript code snippet Copy code The code is as follows: 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) { 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() } );

for(i=0;i { oFragment.appendChild(aTmp[i]); }

oDiv.appendChild(oFragment);

for( var i=1; i if( 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; } }

p { font: 16px Microsoft YaHei; text-align: center; color: #ba0c0c; } p a { font-size: 14px; color: #ba0c0c; } p a:hover { color: red; }