JS를 사용하여 3D 구형 태그 클라우드 샘플 코드 구현

저자：Eve Cole 업데이트 시간：2025-02-28 06:48:01

문제:

1. 인스턴스가 부족하여 호버링이 안되는 것으로 확인되었습니다. (해결 예정)

2. 시스템이 임의로 자동으로 색상을 지정할 수 없는 문제(해결 예정)

먼저, 태그 클라우드를 활용한 유명 웹사이트인 사진 공유 웹사이트 Flickr입니다. 태그 클라우드의 디자이너는 인터랙션 디자이너 Stewart Butterfield입니다. 이후 del, Technorati 등의 웹사이트에서는 태그 클라우드를 채택했습니다.

대부분 "잠재의식 파일"로 귀결되는 태그 클라우드(또는 적어도 가중치 목록)의 첫 번째 공개 출현은 Douglas Coupland의 Microserfs(1995)였습니다. Lester Leaps Out에서 웨일스의 시인 Landau는 동일한 논리를 사용하여 텍스트에 가중치를 부여하여 재즈 음악을 설명하는 그래픽 텍스트 맵을 만듭니다. 이 시는 그의 저서 Magic Fire Chevrolet(1980)에 등장합니다.

HTML 코드 조각

다음과 같이 코드 코드를 복사합니다.

<!DOCTYPE HTML>

<html>

<헤더>

<메타 문자 집합=utf-8 />

</헤더>

<본문>

</div>

</body></html>

자바스크립트 스니펫

다음과 같이 코드 코드를 복사합니다.

var radius = 120; //회전 반경;

var dtr = Math.PI/180;

바드=300;

var mcList = [];

var 활성 = 거짓;

var 라스타 = 1;

var lastb = 1;

var distr = true;

var t속도=10;

변수 크기=250;

var 마우스X=0;

var 마우스Y=0;

var 어떻게Elliptical=1;

var aA=널;

var oDiv=null;

window.onload=함수 ()

{

var i=0;

var oTag=null;

oDiv=document.getElementById('div1');

aA=oDiv.getElementsByTagName('a');

for(i=0;i<aA.length;i++)

{

o태그={};

oTag.offsetWidth=aA[i].offsetWidth;

oTag.offsetHeight=aA[i].offsetHeight;

mcList.push(oTag);

}

사인코사인(0,0,0);

위치모두();

oDiv.onmouseover=함수 ()

{

활성=참;

};

oDiv.onmouseout=함수 ()

{

활성=거짓;

};

oDiv.onmousemove=기능(ev)

{

var oEvent=window.event ||

mouseX=oEvent.clientX-(oDiv.offsetLeft+oDiv.offsetWidth/2);

mouseY=oEvent.clientY-(oDiv.offsetTop+oDiv.offsetHeight/2);

마우스X/=5;

마우스Y/=5;

};

setInterval(업데이트, 30);

};

함수 업데이트()

{

var a;

변수 b;

만약(활성)

{

a = (-Math.min( Math.max( -mouseY, -size ), 크기 ) / 반경 ) * tspeed;

b = (Math.min( Math.max( -mouseX, -size ), 크기 ) / 반경 ) * tspeed;

}

또 다른

{

a = 라스타 * 0.98;

b = 마지막b * 0.98;

}

라스타=a;

마지막b=b;

if(Math.abs(a)<=0.01 && Math.abs(b)<=0.01)

{

반품;

}

var c=0;

사인코사인(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;

당=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();

깊이정렬();

}

함수 깊이정렬()

{

var i=0;

var aTmp=[];

for(i=0;i<aA.length;i++)

{

aTmp.push(aA[i]);

}

aTmp.sort

(

함수(vItem1, vItem2)

{

if(vItem1.cz>vItem2.cz)

{

-1을 반환합니다.

}

그렇지 않은 경우(vItem1.cz<vItem2.cz)

{

1을 반환합니다.

}

또 다른

{

0을 반환합니다.

}

);

for(i=0;i<aTmp.length;i++)

{

aTmp[i].style.zIndex=i;

}

함수 positionAll()

{

바르피=0;

var 세타=0;

var 최대=mcList.length;

var i=0;

var aTmp=[];

var oFragment=document.createDocumentFragment();

//무작위 정렬

for(i=0;i<aA.length;i++)

{

aTmp.push(aA[i]);

}

aTmp.sort

(

기능()

{

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(거리)

{

phi = Math.acos(-1+(2*i-1)/max);

세타 = Math.sqrt(max*Math.PI)*phi;

}

또 다른

{

phi = Math.random()*(Math.PI);

세타 = Math.random()*(2*Math.PI);

}

//좌표 변환

mcList[i-1].cx = 반경 * Math.cos(theta)*Math.sin(phi);

mcList[i-1].cy = 반경 * Math.sin(theta)*Math.sin(phi);

mcList[i-1].cz = 반경 * 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';

}

함수 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;

}

함수 사인코사인(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 코드 조각

다음과 같이 코드 코드를 복사합니다.

body {배경: #000 url(index.png) 반복 없음 센터 230px;}

#div1 {위치:상대; 너비:450px; 여백: 20px 자동 0;

#div1 a {위치:절대:0px; 글꼴-가족: 색상:#fff; 텍스트-장식: 없음 }

#div1 a:hover {테두리: 1px 단색 #eee 배경: #000;

#div1 .blue {색상:파란색;}

#div1 .red {색상:빨간색;}

#div1 .노란색 {색상:노란색;}

p { 글꼴: 16px Microsoft YaHei; 텍스트 정렬: 색상: #ba0c0c }

pa { 글꼴 크기: 14px; 색상: #ba0c0c }

pa:hover { 색상: 빨간색 }