The Cloud Effect of JS labels automatically rotates with the mouse. The whole circle is centered around a circle. No Div code is required between labels, and the text + link form is directly used, javaScript will automatically adjust the display quantity to achieve the best visual effect. Today, I went to the school library and saw a fun thing. I tried Baidu and found it called the "tag ball", which is:
The direct code is as follows:
CSS:
#p1 {position:relative; width:350px; height:350px; border:1px solid #000; margin: 20px auto 0; }#p1 a {position:absolute; top:0px; left:0px; font-family: Microsoft YaHei; color:#000; font-weight:bold; text-decoration:none; padding: 3px 6px; }#p1 a:hover {border: 1px solid #eee; background: #FFF; }#p1 .blue {color:blue;}#p1 .red {color:red;}#p1 .green {color:green;}
HTML:
Tag Cloud PHP waterfall stream Tab Fluid layout SEO egg JavaScript miaov CSS asp.net Blue classic OOP Android magic tea house dialog taoke Pin Weibo IPhone
JS
$(document).ready(function() { $("#p1").windstagball({ radius:120, speed:10 }); });
First, write the layout, and set the position of the outermost p style to relative.
The position of the inner element is absolute to form the effect. top is 0, left is 0.
Import the jquery file first and then the corresponding plug-in file.
Obtain the $ ("# xxx") element and call the windstagball () function. radius indicates the variable size of the label ball, and speed indicates the moving speed.
Attached js plug-in
var radius = 120;var dtr = Math.PI/180;var d=300;var mcList = [];var active = false;var lasta = 1;var lastb = 1;var distr = true;var tspeed=10;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('p1');aA=oDiv.getElementsByTagName('a');for(i=0;ivItem2.cz){return -1;}else if(vItem1.cz