บางครั้งฉันค้นหาข้อมูลบนอินเทอร์เน็ตและเห็นการหมุนเวียนคำหลักในบล็อกของผู้อื่นซึ่งฉันคิดว่าค่อนข้างดี ดังนั้นฉันจึงค้นหาอินเทอร์เน็ตเพื่อดูการใช้งาน และตกลง ฉันเขียนมันเอง
HTML:
คัดลอกรหัสรหัสดังต่อไปนี้:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/lrtk.js"></script>
</หัว>
<ร่างกาย>
<!-- โค้ดเริ่มต้น -->
<div id="div1">
<a >เว็บฟอร์ม Asp.net</a>
<a >Asp.net mvc</a>
<a >อีเอฟ</a>
<a >ปราสาท</a>
<a >Spring.net</a>
<a >ไฮเบอร์เนต</a>
<a >WCF</a>
<a >WPF</a>
<a >เอโอพี</a>
<a >ไอโอซี</a>
<a >SQL</a>
<a >จาวาสคริปต์</a>
<a >เจคิวรี่</a>
<a >KendoUI</a>
</div>
</ร่างกาย>
</html>
ซีเอสเอส:
คัดลอกรหัสรหัสดังต่อไปนี้:
#div1{ความสูง:400px;ความกว้าง:450px; ตำแหน่ง:ญาติ; ระยะขอบ:10px อัตโนมัติ;}
#div1 a{position:absolute;top:0px;left:0px;font-weight:bold;padding:3px 6px; color:black; ข้อความตกแต่ง: ไม่มี;}
#div1 a:hover{border:1px solid #eee;พื้นหลัง:#ccc;border-radius:5px;}
เนื่องจากเป็นคีย์เวิร์ด ฉันคิดว่าการให้สีที่แตกต่างกันคงจะดี เริ่มต้นอาร์เรย์เพื่อจัดเก็บค่าสี จากนั้นสุ่มกำหนดให้กับแต่ละป้ายกำกับ
คัดลอกรหัสรหัสดังต่อไปนี้:
สี var = ["#FF60AF","#9F35FF","#FF2D2D","#6C6C6C","#003D79","#00AEAE","#019858"];
var rand = Math.ceil(Math.random()*6);
AA[i].style.color=colors[แรนด์];
จส:
คัดลอกรหัสรหัสดังต่อไปนี้:
รัศมีวา = 100;
var dtr = Math.PI/180;
วาร์ด=300;
var mcList = [];
var ใช้งานอยู่ = เท็จ;
วาร์ ลาสตา = 1;
varlastb = 1;
var distr = จริง;
var tspeed=2;
ขนาด 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++)
-
สี var = ["#FF60AF","#9F35FF","#FF2D2D","#6C6C6C","#003D79","#00AEAE","#019858"];
var rand = Math.ceil(Math.random()*6);
AA[i].style.color=colors[แรนด์];
โอแท็ก={};
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 (อัพเดต, 10);
-
อัพเดตฟังก์ชัน()
-
วาร์ ก;
วาร์ ข;
ถ้า(ใช้งานอยู่)
-
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);
-
สุดท้ายนี้ ลองดูที่เอฟเฟกต์: