JS를 사용하여 3D 구형 태그 클라우드 샘플 code_javascript 기술 구현-JS 튜토리얼-php.cn

문제:

1. 인스턴스가 부족하여 호버링할 수 없는 것으로 확인되었습니다(해결 예정). 2. 시스템이 무작위로 자동으로 색상을 지정할 수 없습니다.

먼저 태그 클라우드를 활용하세요 주목받는 웹사이트---사진 공유 웹사이트 Flickr. 태그 클라우드의 디자이너는 인터랙션 디자이너 Stewart Butterfield입니다. 이후 del, Technorati 등의 웹사이트에서는 태그 클라우드를 채택했습니다. 주로 "잠재의식적 아카이브"로 귀결되는 태그 클라우드(또는 적어도 가중치 목록)가 최초로 공개된 모습은 Douglas Coupland의 Microserfs(1995)에서였습니다. Lester Leaps Out에서 웨일스의 시인 Landau는 동일한 논리를 사용하여 텍스트에 가중치를 부여하여 재즈 음악을 설명하는 그래픽 텍스트 맵을 만듭니다. 이 시는 그의 저서 Magic Fire Chevrolet(1980)에 등장합니다.

html 코드 조각

코드 복사 코드는 다음과 같습니다.

&lt ;link rel="stylesheet" type="text/css" href="3Dtag_style.css" /> /script> Apple 바나나 西瓜 3Dtag SEO 드래곤 프루트 배 ="#">구형 CSS Java 상속 ="#">C# OOP 언어 카테고리 토마토 C C 토마토 데모 🎜> 3D 구형 태그

자바스크립트 코드 조각

코드 복사

코드는 다음과 같습니다. var 반경 = 120; //旋转半径; var dtr = Math.PI/180; var d=300;

var mcList = []; var 활성 = false; 로드 로드 = 1; var lastb = 1; var distr = true; var tspeed=10; 변수 크기=250;

var mouseX=0; var mouseY=0;

varhowElliptical=1;

var aA=zero; var oTwo=0;

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=기능() { active=true; };

oDiv.onmouseout=기능() { active=false; };

oDiv.onmousemove=기능(ev) { var oEvent=window.event || 집;

mouseX=oEvent.clientX-(oDiv.offsetLeft oDiv.offsetWidth/2); mouseY=oEvent.clientY-(oDiv.offsetTop oDiv.offsetHeight/2);

mouseX/=5; mouseY/=5; };

setInterval(업데이트, 30); };

함수 업데이트() { var a; b였습니다;

if(active) { a = (-Math.min( Math.max( -mouseY, -size ), size ) / radius ) * tspeed; b = (Math.min( Math.max( -mouseX, -size ), 크기 ) / 반경 ) * tspeed; } else { a = 로드 * 0.98; b = 마지막b * 0.98; }

로드=a; 로드b=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(); 깊이정렬(); }

function deepSort() { var i=0; var aTmp=[];

for(i=0;i { aTmp.push(aA[i]); }

aTmp.sort ( 함수(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 세타=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) /최대); 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 = 반경 * 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'; } }

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 '픽셀'; 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 콘텐츠

추가 콘텐츠: body {배경: #000 url(index.png) 반복 없음 센터 230px;} #div1 {위치:상대적; 너비:450px; 높이:450px; 여백: 20px 자동 0; } #div1 a {위치:절대; 상단:0px; 왼쪽:0px; 글꼴 계열: Microsoft YaHei; 색상:#fff; 글꼴 두께:굵게; 텍스트 장식:없음; 패딩: 3px 6px; } #div1 a:hover {border: 1px solid #eee; 배경: #000; } #div1 .blue {color:blue;} #div1 .red {color:red;} #div1 .yellow {color:yellow;}

p { 글꼴: 16px 마이크로소프트 야헤이; 텍스트 정렬: 중앙; 색상: #ba0c0c; } p a { 글꼴 크기: 14px; 색상: #ba0c0c; } p a:hover { 색상: 빨간색; }

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

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