Contoh kode untuk efek rotasi bola kata kunci JS

Penulis：Eve Cole Waktu Pembaruan：2025-01-28 15:24:01

Terkadang saya mencari informasi di Internet dan melihat efek perputaran kata kunci di blog orang lain, yang menurut saya cukup bagus. Jadi saya mencari implementasinya di Internet, dan oke, saya menulisnya sendiri.

HTML:

Copy kode kodenya sebagai berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</kepala>

<tubuh>

<divid='div1'>

<a >Formulir web Asp.net</a>

<a>Benteng</a>

<a >Spring.net</a>

<a >NHibernasi</a>

<a >Javascript</a>

<a >Jquery</a>

<a >KendoUI</a>

</div>

</tubuh>

</html>

CSS:

Copy kode kodenya sebagai berikut:

#div1{tinggi:400px;lebar:450px; posisi:relatif; margin:10px otomatis;}

#div1 a{position:absolute;top:0px;left:0px;font-weight:bold;padding:3px 6px; warna:hitam;

#div1 a:hover{border:1px solid #eee;background:#ccc;border-radius:5px;}

Karena itu adalah kata kunci, saya pikir akan keren jika memberi warna berbeda. Inisialisasi array untuk menyimpan nilai warna, lalu tetapkan secara acak ke setiap label.

Copy kode kodenya sebagai berikut:

var warna = ["#FF60AF","#9F35FF","#FF2D2D","#6C6C6C","#003D79","#00AEAE","#019858"];

var rand = Math.ceil(Matematika.acak()*6);

aA[i].style.color=warna[rand];

JS:

Copy kode kodenya sebagai berikut:

radius var = 100;

var dtr = Matematika.PI/180;

vard=300;

var mcList = [];

var aktif = salah;

var terakhir = 1;

var terakhirb = 1;

var distr = benar;

var tkecepatan=2;

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++)

{

var warna = ["#FF60AF","#9F35FF","#FF2D2D","#6C6C6C","#003D79","#00AEAE","#019858"];

var rand = Math.ceil(Matematika.acak()*6);

aA[i].style.color=warna[rand];

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, 10);

};

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

}

Terakhir, lihat efeknya: