Menggunakan JS untuk mengimplementasikan kode sampel cloud tag bulat 3D

Penulis：Eve Cole Waktu Pembaruan：2025-02-28 06:48:01

Urusan:

1. Ditemukan instance yang tidak mencukupi dan tidak dapat di-hover (untuk diselesaikan)

2. Sistem tidak dapat mewarnai secara acak dan otomatis (dapat diselesaikan)

Pertama, situs web terkenal yang menggunakan tag cloud - situs berbagi foto Flickr. Perancang tag cloud adalah desainer interaksi Stewart Butterfield. Belakangan, tag cloud diadopsi oleh situs web seperti del dan Technorati.

Penampilan pertama yang dipublikasikan dari tag cloud (atau setidaknya daftar berbobot) yang diringkas menjadi sebagian besar "file subliminal" ada di Microserfs karya Douglas Coupland (1995). Dalam Lester Leaps Out, penyair Welsh Landau, menggunakan logika yang sama untuk memberi bobot pada teks guna membuat peta teks grafis untuk mendeskripsikan musik jazz. Puisi tersebut muncul dalam bukunya Magic Fire Chevrolet (1980).

cuplikan kode html

Copy kode kodenya sebagai berikut:

<!DOCTYPEhtml>

<html>

<title>Label bulat 3D</title>

</header>

<tubuh>

<divid='div1'>

<a href="#">Kategori buah</a>

<a href="#">Pisang</a>

<a href="#">Semangka</a>

<a href="#">Mewarisi</a>

<a href="#">Kategori bahasa</a>

<a href="#">Tomat</a>

<a href="#">Tomat</a>

</div>

<p>Tag bulat 3D</p>

</tubuh></html>

Cuplikan Javascript

Copy kode kodenya sebagai berikut:

var radius = 120; //radius rotasi;

var dtr = Matematika.PI/180;

vard=300;

var mcList = [];

var aktif = salah;

var terakhir = 1;

var terakhirb = 1;

var distr = benar;

var tkecepatan=10;

ukuran var=250;

var mouseX=0;

var mouseY=0;

var howElliptical=1;

var aA=nol;

var oDiv=null;

jendela.onload=fungsi ()

{

var i=0;

var oTag=batal;

oDiv=dokumen.getElementById('div1');

aA=oDiv.getElementsByTagName('a');

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

{

oTag={};

oTag.offsetWidth=aA[i].offsetWidth;

oTag.offsetHeight=aA[i].offsetHeight;

mcList.push(oTag);

}

sinusCosine( 0,0,0 );

posisiSemua();

oDiv.onmouseover=fungsi ()

{

aktif=benar;

};

oDiv.onmouseout=fungsi ()

{

aktif=salah;

};

oDiv.onmousemove=fungsi (ev)

{

var oEvent=jendela.event ||.ev;

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

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

mouseX/=5;

tikusY/=5;

};

setInterval(pembaruan, 30);

};

pembaruan fungsi()

{

var a;

var b;

jika (aktif)

{

a = (-Math.min( Math.max( -mouseY, -size ), ukuran ) / radius ) * tspeed;

b = (Math.min( Math.max( -mouseX, -size ), ukuran ) / radius ) * tspeed;

}

kalau tidak

{

a = terakhir * 0,98;

b = terakhirb * 0,98;

}

terakhir=a;

terakhirb=b;

if(Matematika.abs(a)<=0,01 && Matematika.abs(b)<=0,01)

{

kembali;

}

var c=0;

sinusCosinus(a,b,c);

for(var j=0;j<mcList.panjang;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;

varry2=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;

per=d/(d+rz3);

mcList[j].x=(howElliptical*rx3*per)-(howElliptical*2);

mcList[j].y=ry3*per;

mcList[j].skala=per;

mcList[j].alpha=per;

mcList[j].alpha=(mcList[j].alpha-0.6)*(10/6);

}

doPosisi();

pengurutan kedalaman();

}

fungsi penyortiran kedalaman()

{

var i=0;

var aTmp=[];

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

{

aTmp.push(aA[i]);

}

aTmp.sort

(

fungsi (vItem1, vItem2)

{

jika(vItem1.cz>vItem2.cz)

{

kembali -1;

}

lain jika(vItem1.cz<vItem2.cz)

{

kembali 1;

}

kalau tidak

{

kembali 0;

}

);

untuk(i=0;i<aTmp.panjang;i++)

{

aTmp[i].style.zIndex=i;

}

posisi fungsiSemua()

{

varphi=0;

var theta=0;

var max=mcList.panjang;

var i=0;

var aTmp=[];

var oFragment=dokumen.createDocumentFragment();

//Penyortiran acak

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

{

aTmp.push(aA[i]);

}

aTmp.sort

(

fungsi()

{

return Math.acak()<0,5?1:-1;

}

);

untuk(i=0;i<aTmp.panjang;i++)

{

oFragment.appendChild(aTmp[i]);

}

oDiv.appendChild(oFragment);

untuk(var i=1; i<maks+1; i++){

jika(distr)

{

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

theta = Matematika.sqrt(max*Matematika.PI)*phi;

}

kalau tidak

{

phi = Matematika.acak()*(Matematika.PI);

theta = Matematika.acak()*(2*Matematika.PI);

}

//Transformasi koordinat

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

}

fungsi doPosition()

{

var l=oDiv.offsetWidth/2;

var t=oDiv.offsetHeight/2;

for(var i=0;i<mcList.panjang;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=Matematika.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;

}

fungsi sinusCosinus(a, b, c)

{

sa = Matematika.sin(a * dtr);

ca = Matematika.cos(a * dtr);

sb = Matematika.sin(b * dtr);

cb = Matematika.cos(b * dtr);

sc = Matematika.sin(c * dtr);

cc = Matematika.cos(c * dtr);

}

Cuplikan kode CSS

Copy kode kodenya sebagai berikut:

body {latar belakang: #000 url(index.png) pusat tanpa pengulangan 230px;}

#div1 {posisi:relatif; lebar:450px; tinggi:450px; margin: 20px otomatis 0;

#div1 a {posisi:absolute; atas:0px; kiri:0px; font-family: Microsoft YaHei; warna:#fff; font-weight:bold;

#div1 a:hover {batas: 1 piksel solid #eee;

#div1 .biru {warna:biru;}

#div1 .merah {warna:merah;}

#div1 .kuning {warna:kuning;}

p { font: 16px Microsoft YaHei; perataan teks: warna tengah: #ba0c0c }

pa { ukuran font: 14 piksel; warna: #ba0c0c }

pa:arahkan { warna: merah }