在蓝色看到有需要标签云的球形效果,我记得之前在网上见到过,印象比较深刻,就找出地址发给他了,接下来却还有人需要这个效果的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. 解决IE11下载文件 文件名乱码问题

    1.Win + R输入gpedit.msc打开组策略编辑器:(不会请看下图) 2.定位到计算机配置→管理模板→windows组件→Internet Explorer→自定义用户代理字符串(有些系统用的 ...

  2. 长城小主机GW1等型号进BIOS的设置方法

    主板型号 1.进BIOS办法 2.BIOS下设置U盘启动 3.主板设置上电启动 4.主要是否具有快速U盘启动功能 5.定时开机设置 945GMS Ctrl+Alt+F1(注意:自检响铃后,再按) 在B ...

  3. TPS70345 (ACTIVE) 双路输出低压降 (LDO) 稳压器

    The TPS703xx family of devices is designed to provide a complete power management solution for TI DS ...

  4. Memcached (第一篇)

    Memcached是“分布式”的内存对象缓存系统,那么不需要“分布”的.不需要共享的或者干脆规模小到只有一台服务器的应用,Memcached不会带来任何好处,相反还会拖慢系统效率,因为网络连接同样需要 ...

  5. 安装oracle 11gr2 rac on solaris

    http://candon123.blog.51cto.com/704299/389470

  6. .Net高级技术——结构体

    结构体 结构体和类的区别:结构体是值类型,类是引用类型 结构体非常类似于类,但是值类型(拷贝传递),不能被继承 Int32.DateTime等都是结构体,从ValueType继承,值类型. 结构体测试 ...

  7. Spring Boot Jar包转War包 部署到Tomcat下

    原文:https://my.oschina.net/sdlvzg/blog/1562998 我们都知道springBoot中已经内置了tomcat,是不需要我们额外的配置tomcat服务器的,但是有时 ...

  8. Java开发工具全面比较

    1.JDK (Java Development Kit)Java开发工具集 从初学者角度来看Java开发工具,采用JDK开发Java程序能够很快理解程序中各部分代码之间的关系,有利于理解Java面向对 ...

  9. Android 面试题集 包含答案

    作者:guoxiaoxing 链接: https://github.com/guoxiaoxing/android-interview 本文基于作者采用的MIT协议分发. 手画一下Android系统架 ...

  10. C#获取网页内容,并且处理正确编码

    控制台调用static void Main(string[] args) { string code = GetEncodings("http://www.cnblogs.com" ...