Use JS to implement 3D spherical tag cloud sample code_javascript skills-JS Tutorial-php.cn

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; }

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

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