在蓝色看到有需要标签云的球形效果,我记得之前在网上见到过,印象比较深刻,就找出地址发给他了,接下来却还有人需要这个效果的JQuery插件,网上好像也有,但是我看现在这个就不错,就想想自己改成jquery插件,方便喜欢使用jquery插件的人使用。

首先,说明下,这个tagcloud来源于妙味茶馆(http://www.miaov.com/),里面有很多效果的教程,tagcloud只是其中一个,全部是用原生Javascript实现的,他们的Demo地址:http://www.miaov.com/miaov_demo/3dLable/miaov_demo.html(已经失效)先感谢下他们的分享和教程。

接下来,看看此插件的效果图:

windstagball的Demo:

演示地址:http://www.lijian.net/p/windstagball/index.html

下载包:http://www.lijian.net/p/windstagball/windstagballv1.0.zip

使用方法很简单,引入jquery和jquery.windstagball.js,需要显示为标签的HTML如下:

<div id="div">
    <a href="#">标签云</a>
    <a href="#" class="red">PHP</a>
    <a href="#">瀑布流</a>
    <a href="#">Tab</a>
    <a href="#" class="blue">流体布局</a>
    <a href="#">SEO</a>
    <a href="#" class="red">彩蛋</a>
    <a href="#" class="green">JavaScript</a>
    <a href="#">miaov</a>
    <a href="#" class="red">CSS</a>
    <a href="#">asp.net</a>
    <a href="#" class="blue">蓝色经典</a>
    <a href="#">OOP</a>
    <a href="#" class="red">Android</a>
    <a href="#" class="blue">妙味茶馆</a>
    <a href="#">dialog</a>
    <a href="#" class="blue">淘客</a>
    <a href="#">Pin</a>
    <a href="#">微博</a>
    <a href="#" class="green">IPhone</a>
</div>

注意,这里的div要设置CSS"position:relative;",然后在页面实现:

$("#div").windstagball();

当然,也可以使用参数,如下:

$("#div").windstagball({
            radius:120,
            speed:10
 });

radius为标签云的半径,单位像素,speed则为运行速度,建议使用默认值10。

好了,再去看看你的页面,就有很炫的tagcloud效果了!(转)

很不错标签云js插件的更多相关文章

  1. 标签球-Js插件

    今天上学校的图书馆,看到了一个好玩的东西,特意百度了下,发现叫做“标签球”,效果图为: 直接代码如下: #div1 {position:relative; width:350px; height:35 ...

  2. SQL Pretty Printer for SSMS 很不错的SQL格式化插件

    写SQL语句或者脚本时,看到凌乱的格式就头大了,于是决心找一款SQL语句格式化的工具. 功夫不负有心人还真的被我找到一款很好用,很方便的SQL Server插件:SQL Pretty Printer ...

  3. 【转】SQL Pretty Printer for SSMS 很不错的SQL格式化插件

    源地址:https://www.cnblogs.com/leospace/archive/2012/09/04/SQL_Pretty_Printer_for_SSMS.html 写SQL语句或者脚本时 ...

  4. (转)一篇很不错的介绍Eclipse插件Menu及其扩展点的文章

    原文在:http://tech.ddvip.com/2010-04/1271054623150507.html 菜单是各种软件及开发平台会提供的必备功能,Eclipse 也不例外,提供了丰富的菜单,包 ...

  5. 原生js文字标签云上下滚动播放

    效果:http://hovertree.com/texiao/js/25/ 效果图: 代码如下: <!DOCTYPE html> <html> <head>< ...

  6. JQCloud: 一个前端生成美化标签云的简单JQuery插件

    本文原文地址:https://jiang-hao.com/articles/2018/blog-JQCloud.html 因为博客需要,发现了一个生成美化简约风格的标签云的JQuery插件. 官网地址 ...

  7. Python3.7+jieba(结巴分词)配合Wordcloud2.js来构造网站标签云(关键词集合)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_138 其实很早以前就想搞一套完备的标签云架构了,迫于没有时间(其实就是懒),一直就没有弄出来完整的代码,说到底标签对于网站来说还是 ...

  8. Typecho - MyTagCloud标签云插件

    一.前言: 标签云是博客.CMS类系统的常见功能,读者可以根据标签快速的查找和浏览自己喜欢的文章.个人很喜欢Typecho的简洁,但对于后台不能控制前台标签栏目的显示还是略表遗憾.令人高兴的是Type ...

  9. C#不用union,而是有更好的方式实现 .net自定义错误页面实现 .net自定义错误页面实现升级篇 .net捕捉全局未处理异常的3种方式 一款很不错的FLASH时种插件 关于c#中委托使用小结 WEB网站常见受攻击方式及解决办法 判断URL是否存在 提升高并发量服务器性能解决思路

    C#不用union,而是有更好的方式实现   用过C/C++的人都知道有个union,特别好用,似乎char数组到short,int,float等的转换无所不能,也确实是能,并且用起来十分方便.那C# ...

随机推荐

  1. 该死的Ubuntu 16.04不自动续租DHCP的IP

    BUG,这是一个BUG,参考:https://bugs.launchpad.net/ubuntu/+source/isc-dhcp/+bug/1551351,如果不自动续租IP,导致的问题就是网线灯还 ...

  2. sql 递归查询所有的下级

    --> 生成测试数据表: [tb] IF OBJECT_ID('[Users]') IS NOT NULL     DROP TABLE [Users] GO CREATE TABLE [Use ...

  3. Apple Developer Registration and DUNS Number Not Accepted

    Now that I have my Mac and app source code. I’m ready to start working on my first app. The next ste ...

  4. HTTP 协议中 Vary 的一些研究

    经常抓包看 HTTP 请求的同学应该对 Vary 这个响应头字段并不陌生,它有什么用?用 PageSpeed 工具检查页面时,经常看到「Specify a Vary: Accept-Encoding ...

  5. bt z

    比特币从2008年开始启动,到09年创始区块的出现,甚至一直到10年和11年都只是中本聪自己一个人在运行这套程序.在早期这个极少数人参与到游戏里,大家运行一个软件,这个软件既是钱包也是挖矿软件,进行P ...

  6. kafka分区原理图

    一个Topic的多个分区,被分布在kafka集群中的多个server上.每一个分区都有一个server为"leader";leader负责全部的读写操作,假设leader失效,那么 ...

  7. 一种基于ES5的JavaScript继承

    关于JavaScript继承,方式非常多,包含compile-to-javascript的语言TypeScript, CoffeeScript以及站点MDN, GitHub, Modernizr各种p ...

  8. 算法:堆排序(Heap Sort)

    备注 考虑到 Heap 的特性,很容易想到将其用作排序的用处,为了提高效率需要适当的改进一下,如:in place remove 和 in place move down. 代码 using Syst ...

  9. iOS7以下设备获取mac地址

    注意,是iOS7以下的设备,直接上源码,获取mac地址都是为了唯一标识一个设备的,但iOS7设备的mac地址为 020000000000 MacAddress.h #include <sys/s ...

  10. MySQL中limit的用法

    SELECT * FROM table  LIMIT [offset,] rows | rows OFFSET offset   LIMIT 子句可以被用于强制 SELECT 语句返回指定的记录数.L ...