| Html <div class= "Tab_clouds"
<div id= "list"
<a href= "#" >AJAX</A>
<a href= "#" >CSS</A>
<a href= " # ">design</a>
<a href=" # ">FIREFOX</A>
<a href=" # ">flash </a>
<a href= "#" >HTML</A>
<a href= "#" >Devirtuoso</a>
<a href= "#" >jquery</a>
<a href= "#" >PHP</A>
<a href= "#" >SEO</A>
<a href= "#" >USABILITY</A>
<a href= "#" >www</a>
<a href= "#" >WEB</A>
<a href= "#" >xhtml </a>
<a href= "#" >SEO</A>
<a href= "#" >usability</a>
<a href= "#" >www</a>
</div>
</div> Css <style type= "Text/css" >
. tab_clouds{margin:50px Auto;width:220px;background-color: #fcfcfc; border:1px solid #e4e4e4; border-radius:5px; box-shadow:1px 1px 3px #eee;p adding:1px}
. Tab_clouds h4{line-height:23px;background: #f7f7f7; border-bottom:1px solid #e4e4e4;p adding:0 10px;box-shadow:0 1px 1px #f4f4f4}
#list {width:100%;height:300px;overflow:hidden;position:relative}
. Tab_clouds A{position:absolute;text-decoration:none;color: #333; font-family:´microsoft yahei´;text-shadow:1px 1px 2px #aaa;d Isplay:none}
. Tab_clouds A:hover{color: #c00; text-shadow:2px 2px 10px #aaa}
</style>
Javascript <script>
function Tagclouds (box) {
if (!box) {return;}
var item = Box.find ("a"),
Len = Item.length,
Step = 0.02,
Offset = 0,
t = Box.offset (). Top,
h = box.height (),
M,a,x,y,size,left,c;
Box.mousemove (function (e) {
Step = (E.CLIENTY-T)/h * 0.2-0.1;
}). mouseout (function () {
Step = 0.02;
});
for (var i = len-1 i >= 0; i--) {
Item[i].angle = i * Math.PI * 2/len;
}
function R () {
for (var i = len-1 i >= 0; i--) {
m = Item[i];
A = M.angle + offset;
x = + Math.sin (a) * 30;
y = + Math.Cos (a) * 40;
Size = Math.Round (30-math.sin (a) * 4);
c = $ (m). Width ()/2;
left = (Box.width ()/2) * X/100-C;
$ (M). CSS ({
"Font-size": Size,
"Opacity": Size/30,
"Z-index": Size,
' Left ': left,
"Top": y+ "%"
})
}
Offset + = step;
}
Window.setinterval (r,30);
Window.settimeout (function () {Item.fadein (200)},1000);
}
</script> |
