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

    webpack入门(1) 源码戳这里 ps:每个案例对应相应的demo,例如"案例1"对应"demo1" 一.webpack基本功能及简单案例 安装webpac ...

  2. SCSI Pass-Through Interface Tool

    http://code.msdn.microsoft.com/SCSI-Pass-Through-a906ceef/sourcecode?fileId=59048&pathId=1919073 ...

  3. ldd pvs dis on solaris 10

    #include <QtGui/QApplication> #include <QtGui/QDialog> int main(int argc, char *argv[]) ...

  4. Dictionary GetOrAdd

    public static TValue GetOrAdd<TKey,TValue>( this Dictionary<TKey,TValue> dictionary, TKe ...

  5. DockManager 如何快速隐藏DockPanel z

    DockPanel在点击hide按钮时候如果鼠标不离开的话,panel还是没隐藏,某种情况下这种现象着实让人不爽,而且当鼠标离开后默认是很缓慢的隐藏 AutoHideSpeed不设置也可以,主要设置H ...

  6. DTO vs. Assembly(转载)

    DTO vs. Assembly We probably need to make a strong statement about data transfer objects. Do we like ...

  7. 内存及字符串操作篇strlen strchar strcmp strcoll strcpy strdup strstr strtok strspn strrchr bcmp bcopy bzero index memccpy memset

    bcmp(比较内存内容) 相关函数 bcmp,strcasecmp,strcmp,strcoll,strncmp,strncasecmp 表头文件 #include<string.h> 定 ...

  8. html调用servlet(JDBC在Servlet中的使用)(1)

    1.页面的数据表单 在使用Servlet处理用户请求之前,先准备一个页面,该页面用来提供数据表单.数据表单就是HTML中的<form>...</form>部分,当用户单击Sub ...

  9. vue项目ide(vue项目环境搭建)

    一.先介绍一下我接下来要做的项目 项目:ide可视化工具 技术应用: Vue2.0(js框架):https://cn.vuejs.org/ ElementUi(饿了吗ui框架基于vue的):http: ...

  10. win C/C++程序通过Get方式获取网页源代码

    [转自]http://www.cnblogs.com/coderzh/archive/2008/11/24/1340134.html #include <stdio.h> #include ...