php球形,标签云(tagcloud)的球形JQuery插件

太过爱你忘了你带给我的痛 2023-01-15 08:17 151阅读 0赞

大家可能都看到过Flash实现的标签云，很多网站都使用Flash构建的标签云，包括wordpress中都有相关的标签云插件。今天我们这里介绍一款jQuery开发的标签云插件：3D tag cloud，希望大家喜欢！

![89063819\_2.jpg][89063819_2.jpg]

相关选项zoom: 90 初始的缩放度

min\_zoom: 25

max\_zoom: 120

zoom\_factor: 2 - 鼠标滚轮的缩放速度

rotate\_factor: -0.45 - 鼠标移动时球体旋转的数量。正数将反向旋转

fps: 10 - 定义每秒动画更新的次数

centrex: 250 - 在container div中水平方向旋转中心

centrey: 250 在container div中垂直方向旋转中心

min\_font\_size: 12

max\_font\_size: 32

font\_units: 'px'

random\_points: 50 - 添加一些随机的点到球体来提高效果

foreground\_colour: \#fff - 接受的格式为： \#333 \#0A0A0A 和 rgb(n,n,n)

background\_colour: rgb(0,0,0) - 不能使用颜色名字

Javascript代码：$('.tags').tagcloud();

演示中的代码如下：$(function()\{ $('\#ts1').tagcloud(\{centrex:250, centrey:250, init\_motion\_x:10, init\_motion\_y:10\});\});

HTML标签：

*  [HTML][]
 *  [CSS][]
 *  [Javascript][]
 *  [jQuery][]
 *  [jQuery plugin][]
 *  [jQuery tutorial][]
 *  [jQuery howto][]
 *  [jQuery plugins][]
 *  [jQuery mobile][]
 *  [java][]
 *  [SEO][]
 *  [Quiz][]
 *  [News][]
 *  [People][]
 *  [Mobile][]
 *  [Photoshop][]
 *  [Design][]

是不是很简单？大家可以方便的添加标签云到网站上了！

======================================================================

===================================================

演示地址：http://www.lijian.net/p/windstagball/index.html下载包：http://www.lijian.net/p/windstagball/windstagballv1.0.zip使用方法很简单，引入jquery和jquery.windstagball.js,需要显示为标签的HTML如下：标签云PHP瀑布流Tab流体布局SEO彩蛋

JavaScriptmiaovCSSasp.net蓝色经典OOPAndroid妙味茶馆

dialog淘客Pin微博IPhone

注意，这里的div要设置CSS“position:relative;”，然后在页面实现：$("\#div").windstagball();当然，也可以使用参数，如下：$("\#div").windstagball(\{radius:120,speed:10\});

[89063819_2.jpg]: http://image102.360doc.com/DownloadImg/2017/01/1119/89063819_2.jpg
[HTML]: http://www.gbin1.com/technology/html
[CSS]: http://www.gbin1.com/technology/css
[Javascript]: http://www.gbin1.com/technology/javascript
[jQuery]: http://www.gbin1.com/technology/jquery
[jQuery plugin]: http://www.gbin1.com/technology/jquerynews
[jQuery tutorial]: http://www.gbin1.com/technology/jquerytutorial
[jQuery howto]: http://www.gbin1.com/technology/jqueryhowto
[jQuery plugins]: http://www.gbin1.com/technology/jqueryplugins
[jQuery mobile]: http://www.gbin1.com/technology/jquerymobile
[java]: http://www.gbin1.com/technology/javautilities
[SEO]: http://www.gbin1.com/technology/seo
[Quiz]: http://www.gbin1.com/technology/onlinequiz
[News]: http://www.gbin1.com/internet/news
[People]: http://www.gbin1.com/internet/people
[Mobile]: http://www.gbin1.com/internet/mobile
[Photoshop]: http://www.gbin1.com/tools/photoshop
[Design]: http://www.gbin1.com/tools/design