当前位置: 首页 > news >正文

很不错标签云js插件

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

转载于:https://www.cnblogs.com/lovebing/p/6426522.html

相关文章:

  • Atitit 遍历文件夹算法 autoit attilax总结
  • Hive常用命令
  • ArcGIS Runtime SDK for WPF之测量距离和面积
  • hash随笔
  • ELASTIC API
  • 关于版本强制升级与非强制升级
  • Syntax error, insert } to complete MethodBody
  • css之鼠标cursor
  • template.js小小说明
  • 阿里云centos6.5下搭建javaWeb运行环境
  • CPA-IBE
  • H5移动端开发入门知识以及CSS的单位汇总与用法
  • 修改或删除任务计划
  • 用决策树模型求解回归问题(regression tree)
  • Javascript 面向对象编程(一):封装
  • 03Go 类型总结
  • 10个确保微服务与容器安全的最佳实践
  • CentOS7 安装JDK
  • java概述
  • maya建模与骨骼动画快速实现人工鱼
  • React-flux杂记
  • STAR法则
  • UMLCHINA 首席专家潘加宇鼎力推荐
  • Vue 动态创建 component
  • WebSocket使用
  • 爱情 北京女病人
  • -- 查询加强-- 使用如何where子句进行筛选,% _ like的使用
  • 从0到1:PostCSS 插件开发最佳实践
  • 力扣(LeetCode)965
  • 前端存储 - localStorage
  • 少走弯路,给Java 1~5 年程序员的建议
  • - 语言经验 - 《c++的高性能内存管理库tcmalloc和jemalloc》
  • (Demo分享)利用原生JavaScript-随机数-实现做一个烟花案例
  • (每日持续更新)jdk api之StringBufferInputStream基础、应用、实战
  • (深度全面解析)ChatGPT的重大更新给创业者带来了哪些红利机会
  • (一)认识微服务
  • (译) 理解 Elixir 中的宏 Macro, 第四部分:深入化
  • (原創) 如何安裝Linux版本的Quartus II? (SOC) (Quartus II) (Linux) (RedHat) (VirtualBox)
  • ***检测工具之RKHunter AIDE
  • *上位机的定义
  • .net core使用RPC方式进行高效的HTTP服务访问
  • .Net的C#语言取月份数值对应的MonthName值
  • .NET轻量级ORM组件Dapper葵花宝典
  • .NET设计模式(11):组合模式(Composite Pattern)
  • /etc/fstab 只读无法修改的解决办法
  • ??如何把JavaScript脚本中的参数传到java代码段中
  • @test注解_Spring 自定义注解你了解过吗?
  • [20161101]rman备份与数据文件变化7.txt
  • [20180224]expdp query 写法问题.txt
  • [AIGC] Nacos:一个简单 yet powerful 的配置中心和服务注册中心
  • [android] 请求码和结果码的作用
  • [APIO2015]巴厘岛的雕塑
  • [AR Foundation] 人脸检测的流程
  • [BZOJ] 2427: [HAOI2010]软件安装
  • [BZOJ1178][Apio2009]CONVENTION会议中心