Sometimes it is quite good to check the information on the Internet and see the keyword rotation on others' blogs. So I searched for its implementation on the Internet. Okay, write it on your own.
HTML:
Copy codeThe Code is as follows:
<! 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">
<Head>
<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/lsn. js"> </script>
</Head>
<Body>
<! -- Code start -->
<Div id = "div1">
<A> Asp.net webform </a>
<A> Asp.net mvc </a>
<A> EF </a>
<A> Castle </a>
<A> Spring.net </a>
<A> nhib.pdf </a>
<A> WCF </a>
<A> WPF </a>
<A> AOP </a>
<A> IoC </a>
<A> SQL </a>
<A> Javascript </a>
<A> Jquery </a>
<A> KendoUI </a>
</Div>
</Body>
</Html>
CSS:
Copy codeThe Code is as follows:
# Div1 {height: 400px; width: pixel PX; position: relative; margin: 10px auto ;}
# Div1 a {position: absolute; top: 0px; left: 0px; font-weight: bold; padding: 3px 6px; color: black; text-decoration: none ;}
# Div1 a: hover {border: 1px solid # eee; background: # ccc; border-radius: 5px ;}
Since it is a keyword, I think it is cool to add different colors to them. Initialize an array to store color values, and then randomly assign them to tags.
Copy codeThe Code is as follows:
Var colors = ["# FF60AF", "# 9F35FF", "# FF2D2D", "# 6C6C6C", "#003D79", "#00 AEAE ", "#019858"];
Var rand = Math. ceil (Math. random () * 6 );
AA [I]. style. color = colors [rand];
JS:
Copy codeThe Code is as follows:
Var radius = 100;
Var dtr = Math. PI/180;
Var d = 300;
Var mcList = [];
Var active = false;
Var lasta = 1;
Var lastb = 1;
Var distr = true;
Var tspeed = 2;
Var size = 250;
Var mouseX = 0;
Var mouseY = 0;
Var howElliptical = 1;
Var aA = null;
Var oDiv = null;
Window. onload = function ()
{
Var I = 0;
Var oTag = null;
ODiv = document. getElementById ('div1 ');
AA = oDiv. getElementsByTagName ('A ');
For (I = 0; I <aA. length; I ++)
{
Var colors = ["# FF60AF", "# 9F35FF", "# FF2D2D", "# 6C6C6C", "#003D79", "#00 AEAE ", "#019858"];
Var rand = Math. ceil (Math. random () * 6 );
AA [I]. style. color = colors [rand];
OTag = {};
OTag. offsetWidth = aA [I]. offsetWidth;
OTag. offsetHeight = aA [I]. offsetHeight;
McList. push (oTag );
}
SineCosine (0, 0 );
PositionAll ();
ODiv. onmouseover = function ()
{
Active = true;
};
ODiv. onmouseout = function ()
{
Active = false;
};
ODiv. onmousemove = function (ev)
{
Var oEvent = window. event | ev;
MouseX = oEvent. clientX-(oDiv. offsetLeft + oDiv. offsetWidth/2 );
MouseY = oEvent. clientY-(oDiv. offsetTop + oDiv. offsetHeight/2 );
MouseX/= 5;
MouseY/= 5;
};
SetInterval (update, 10 );
};
Function update ()
{
Var;
Var B;
If (active)
{
A = (-Math. min (Math. max (-mouseY,-size), size)/radius) * tspeed;
B = (Math. min (Math. max (-mouseX,-size), size)/radius) * tspeed;
}
Else
{
A = lasta * 0.98;
B = lastb * 0.98;
}
Lasta =;
Lastb = B;
If (Math. abs (a) <= 0.01 & Math. abs (B) <= 0.01)
{
Return;
}
Var c = 0;
SineCosine (a, B, c );
For (var j = 0; j <mcList. length; 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 * (-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]. scale = per;
McList [j]. alpha = per;
McList [j]. alpha = (mcList [j]. alpha-0.6) * (10/6 );
}
DoPosition ();
DepthSort ();
}
Function depthSort ()
{
Var I = 0;
Var aTmp = [];
For (I = 0; I <aA. length; I ++)
{
ATmp. push (aA [I]);
}
ATmp. sort
(
Function (vItem1, vItem2)
{
If (vItem1.cz> vItem2.cz)
{
Return-1;
}
Else if (vItem1.cz <vItem2.cz)
{
Return 1;
}
Else
{
Return 0;
}
}
);
For (I = 0; I <aTmp. length; I ++)
{
ATmp [I]. style. zIndex = I;
}
}
Function positionAll ()
{
Var phi = 0;
Var theta = 0;
Var max = mcList. length;
Var I = 0;
Var aTmp = [];
Var oFragment = document. createDocumentFragment ();
// Random sorting
For (I = 0; I <aA. length; I ++)
{
ATmp. push (aA [I]);
}
ATmp. sort
(
Function ()
{
Return Math. random () <0.5? 1:-1;
}
);
For (I = 0; I <aTmp. length; I ++)
{
OFragment. appendChild (aTmp [I]);
}
ODiv. appendChild (oFragment );
For (var I = 1; I <max + 1; I ++ ){
If (distr)
{
Phi = Math. acos (-1 + (2 * i-1)/max );
Theta = Math. sqrt (max * Math. PI) * phi;
}
Else
{
Phi = Math. random () * (Math. PI );
Theta = Math. random () * (2 * Math. PI );
}
// Coordinate Transformation
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 ';
}
}
Function doPosition ()
{
Var l = oDiv. offsetWidth/2;
Var t = oDiv. offsetHeight/2;
For (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]. 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 );
}
The final result is as follows: