Today, the school library, saw a fun thing, deliberately Baidu under, found to be called "tag Ball", for:
The direct code is as follows:
#div1{position:relative;width:350px;Height:350px;Border:1px solid #000;margin:20px Auto 0; }#div1 a{position:Absolute;Top:0px; Left:0px;font-family:Microsoft Yahei;Color:#000;Font-weight:Bold;text-decoration:None;padding:3px 6px; }#div1 a:hover{Border:1px solid #eee;background:#FFF; }#div1. Blue{Color:Blue;}#div1. Red{Color:Red;}#div1. Green{Color:Green;}
<DivID= "Div1"> <ahref="#">Tag Cloud</a> <ahref="#"class= "Red">Php</a> <ahref="#">Waterfall Flow</a> <ahref="#">Tab</a> <ahref="#"class= "Blue">Fluid layout</a> <ahref="#">Seo</a> <ahref="#"class= "Red">Eggs</a> <ahref="#"class= "Green">Javascript</a> <ahref="#">Miaov</a> <ahref="#"class= "Red">Css</a> <ahref="#">asp</a> <ahref="#"class= "Blue">Blue Classic</a> <ahref="#">Oop</a> <ahref="#"class= "Red">Android</a> <ahref="#"class= "Blue">Taste teahouse</a> <ahref="#">Dialog</a> <ahref="#"class= "Blue">Amoy Customers</a> <ahref="#">Pin</a> <ahref="#">Weibo</a> <ahref="#"class= "Green">Iphone</a></Div>
$ (document). Ready (function() { $ ("#div1"). Windstagball ({ radius: (Speed: ); });
- First you have to write the layout, the outermost div style position set to relative
- The inner element position to absolute, so that the effect can be formed, top is 0,left 0
- Import the jquery file first, and then import the appropriate plug-in file
- Get the $ ("#xxx") element and call the Windstagball () function, radius is the size of the label ball, speed as the name implies.
Demo:http://www.miaov.com/miaov_demo/3dlable/miaov_demo.html
Tag Ball-js plug-in