当前位置：Gxlcms > JavaScript > javascript实现动态标签云_javascript技巧

javascript实现动态标签云_javascript技巧

时间：2021-07-01 10:21:17 帮助过：3人阅读

今天上学校的图书馆，看到了一个好玩的东西，特意百度了下，发现叫做“标签球”，效果图为：

直接代码如下：

CSS:

#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;}

HTML:


  标签云
  PHP
  瀑布流
  Tab
  流体布局
  SEO
  彩蛋
  JavaScript
  miaov
  CSS
  asp.net
  蓝色经典
  OOP
  Android
  妙味茶馆
  dialog
  淘客
  Pin
  微博
  IPhone

JS

首先得写好布局，最外层div样式position设置为relative

内层元素position为absolute，这样才能形成效果，top为0，left为0
先导入jquery文件，再导入相应的插件文件
获取$("#xxx")元素，并调用windstagball()函数，radius是标签球的变径大小，speed顾名思义就是运动的速度。

附上js插件