การใช้ JS เพื่อใช้โค้ดตัวอย่างแท็กคลาวด์แท็กทรงกลม 3 มิติ

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-02-28 06:48:01

วัตถุ:

1. พบว่ามีอินสแตนซ์ไม่เพียงพอและไม่สามารถโฮเวอร์ได้ (ต้องแก้ไข)

2. ระบบไม่สามารถสุ่มสีและอัตโนมัติได้ (รอการแก้ไข)

ขั้นแรก เว็บไซต์ระดับสูงที่ใช้แท็กคลาวด์ - เว็บไซต์แบ่งปันรูปภาพ Flickr ผู้ออกแบบแท็กคลาวด์คือผู้ออกแบบเชิงโต้ตอบ Stewart Butterfield ต่อมาเว็บไซต์ต่างๆ เช่น del และ Technorati ได้นำแท็กคลาวด์มาใช้

การปรากฏตัวครั้งแรกของ tag cloud (หรืออย่างน้อยก็เป็นรายการแบบถ่วงน้ำหนัก) ซึ่งรวมไปถึง "ไฟล์อ่อนเกิน" ส่วนใหญ่อยู่ใน Microserfs ของ Douglas Coupland (1995) ใน Lester Leaps Out กวีชาวเวลส์ Landau ใช้ตรรกะเดียวกันในการถ่วงน้ำหนักข้อความเพื่อสร้างแผนผังข้อความกราฟิกเพื่ออธิบายดนตรีแจ๊ส บทกวีนี้ปรากฏในหนังสือของเขา Magic Fire Chevrolet (1980)

ข้อมูลโค้ด html

คัดลอกรหัสรหัสดังต่อไปนี้:

<!DOCTYPE html>

<html>

<ส่วนหัว>

<title>ป้ายกำกับทรงกลม 3 มิติ</title>

</ส่วนหัว>

<ร่างกาย>

<a href="#">หมวดหมู่ผลไม้</a>

<a href="#">แอปเปิล</a>

<a href="#">แตงโม</a>

<a href="#">แก้วมังกร</a>

<a href="#">ลูกแพร์</a>

<a href="#">ทรงกลม</a>

<a href="#">ซีเอสเอส</a>

<a href="#">พีเอชพี</a>

<a href="#">สืบทอด</a>

<a href="#">หมวดหมู่ภาษา</a>

<a href="#">มะเขือเทศ</a>

<a href="#">มะเขือเทศ</a>

<a href="#">สาธิต</a>

</div>

<p>แท็กทรงกลม 3 มิติ</p>

</body></html>

ข้อมูลโค้ดจาวาสคริปต์

คัดลอกรหัสรหัสดังต่อไปนี้:

รัศมี var = 120; // รัศมีการหมุน;

var dtr = Math.PI/180;

วาร์ด=300;

var mcList = [];

var ใช้งานอยู่ = เท็จ;

วาร์ ลาสตา = 1;

varlastb = 1;

var distr = จริง;

var tspeed=10;

ขนาด var=250;

var mouseX=0;

var mouseY=0;

var อย่างไรElliptical=1;

var AA=null;

var oDiv=null;

window.onload=ฟังก์ชั่น ()

วาร์ i=0;

var oTag=null;

oDiv=document.getElementById('div1');

AA=oDiv.getElementsByTagName('a');

สำหรับ(i=0;i<aA.length;i++)

โอแท็ก={};

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

อัพเดตฟังก์ชัน()

วาร์ ก;

วาร์ ข;

ถ้า(ใช้งานอยู่)

a = (-Math.min( Math.max( -mouseY, -size ), ขนาด ) / รัศมี ) * tspeed;

b = (Math.min( Math.max( -mouseX, -size ), ขนาด ) / รัศมี ) * tspeed;

อื่น

ก = สุดท้าย * 0.98;

ข = สุดท้ายb * 0.98;

สุดท้าย=a;

สุดท้ายb=b;

ถ้า(Math.abs(a)<=0.01 && Math.abs(b)<=0.01)

กลับ;

วาร์ค=0;

ไซน์โคไซน์(a,b,c);

สำหรับ (var j=0;j<mcList.length;j++)

var rx1=mcList[เจ].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;

วาร์ ry2=ry1;

var rz2=rx1*(-sb)+rz1*cb;

var rx3=rx2*ซีซี+ry2*(-sc);

var ry3=rx2*sc+ry2*ซีซี;

วาร์ rz3=rz2;

mcList[j].cx=rx3;

mcList[เจ].cy=ry3;

mcList[j].cz=rz3;

ต่อ=d/(d+rz3);

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

mcList[j].y=ry3*ต่อ;

mcList[j].สเกล=ต่อ;

mcList[j].อัลฟา=ต่อ;

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

ทำตำแหน่ง();

เรียงลำดับความลึก();

ฟังก์ชั่น deepSort()

วาร์ i=0;

var aTmp=[];

สำหรับ(i=0;i<aA.length;i++)

aTmp.push(aA[i]);

aTmp.เรียงลำดับ

ฟังก์ชั่น (vItem1, vItem2)

ถ้า(vItem1.cz>vItem2.cz)

กลับ -1;

อย่างอื่นถ้า(vItem1.cz<vItem2.cz)

กลับ 1;

อื่น

กลับ 0;

สำหรับ(i=0;i<aTmp.length;i++)

aTmp[i].style.zIndex=i;

ฟังก์ชั่นตำแหน่งทั้งหมด()

วาร์ฟี=0;

วาร์ทีต้า=0;

var max=mcList.length;

วาร์ i=0;

var aTmp=[];

var oFragment=document.createDocumentFragment();

//การเรียงลำดับแบบสุ่ม

สำหรับ(i=0;i<aA.length;i++)

aTmp.push(aA[i]);

aTmp.เรียงลำดับ

การทำงาน()

กลับ Math.random()<0.5?1:-1;

สำหรับ(i=0;i<aTmp.length;i++)

oFragment.appendChild(aTmp[i]);

oDiv.appendChild(oFragment);

สำหรับ(var i=1; i<max+1; i++){

ถ้า(แยก)

พี = Math.acos(-1+(2*i-1)/สูงสุด);

ทีต้า = Math.sqrt(สูงสุด*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;

สำหรับ (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].อัลฟา;

ฟังก์ชันไซน์โคไซน์(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);

ซีซี = Math.cos(c * dtr);

ข้อมูลโค้ด CSS

คัดลอกรหัสรหัสดังต่อไปนี้:

เนื้อความ {พื้นหลัง: #000 url (index.png) ไม่ทำซ้ำตรงกลาง 230px;}

#div1 {ตำแหน่ง: ญาติ; ความกว้าง: 450px; ความสูง: 450px; ระยะขอบ: 20px อัตโนมัติ 0;

#div1 a {position:absolute; top:0px; ซ้าย:0px;

#div1 a:hover {เส้นขอบ: 1px ทึบ #eee; พื้นหลัง: #000;

#div1 .blue {สี:สีฟ้า;}

#div1 .red {สี:สีแดง;}

#div1 .green {สี:สีเหลือง;}

p { แบบอักษร: 16px Microsoft YaHei; การจัดตำแหน่งข้อความ: center; color: #ba0c0c;

pa { ขนาดตัวอักษร: 14px; สี: #ba0c0c;

pa:โฮเวอร์ { สี: แดง;