在蓝色看到有需要标签云的球形效果,我记得之前在网上见到过,印象比较深刻,就找出地址发给他了,接下来却还有人需要这个效果的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. Git_添加远程库

    现在的情景是,你已经在本地创建了一个Git仓库后,又想在GitHub创建一个Git仓库,并且让这两个仓库进行远程同步,这样,GitHub上的仓库既可以作为备份,又可以让其他人通过该仓库来协作,真是一举 ...

  2. java并发基础(二)

    <java并发编程实战>终于读完4-7章了,感触很深,但是有些东西还没有吃透,先把已经理解的整理一下.java并发基础(一)是对前3章的总结.这里总结一下第4.5章的东西. 一.java监 ...

  3. WINDOWS 的 MKLINK : 硬链接,符号链接 : 文件符号链接, 目录符号链接 : 目录联接

    玩转WIN7的MKLINK 引言: 换了新电脑,终于再次使用上啦WIN7 ,经过一个周每天重装N次系统,... ... ... ... 在xp系统下,junction命令要用微软开发的小程序 junc ...

  4. StringBuilder和StringBuffer解析(百度面试题优化须要用到的)

    StringBuilder是java5及以后提供的API,它不是线程安全的,而StringBuffer是java1.4曾经的API,它是线程安全的,所以说StringBuilder的效率更高一些,今天 ...

  5. BTA 常问的 Java基础40道常见面试题及详细答案

    原文:http://www.ymq.io/2018/03/10/java/ 八种基本数据类型的大小,以及他们的封装类 引用数据类型 Switch能否用string做参数 equals与==的区别 自动 ...

  6. DAHON 美国大行

    DAHON美国大行1982年创立于美国加州,多年来一直率先推动环保的代步工具——折叠自行车.创新是大行的生命,从韩氏兄弟发明了全世界第一辆小到能够放进火车座椅底下的折叠自行车起,大行就开启了不断向前的 ...

  7. Python、Lua和Ruby比较——脚本语言大P.K.

    译者按:Python.lua和ruby在C/C++是日渐式微的情况下,在java/.net的围歼中努力抗争的三个当红小生.在Tom Gutschmidt的著作<Game Programmng w ...

  8. 解决 Ubuntu Software (Software Center) Crash 问题

    问题描述: no application data found 解决方式: sudo apt purge gnome-software ubuntu-software sudo apt autorem ...

  9. 从win10家庭版/中文版升级到win10专业版

    发布时间:2015-8-4     很多同学在不了解win10系统版本的情况下,安装了win10家庭版/中文版,不管是win10家庭版,还是win10家庭中文版,或者是win10家庭单语言版,它们都是 ...

  10. 【BZOJ】【1091】【SCOI2003】切割多边形

    计算几何+枚举 我比较傻逼……一开始想了个贪心,就是这样: