jqcloud 标签云效果
2024-10-11 17:39:53
官网地址: http://mistic100.github.io/jQCloud/index.htmlgithub 地址: https://github.com/lucaong/jQCloud使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="dist/jqcloud.css">
<script src="jquery2.1.4.js"></script>
<script src="dist/jqcloud.js"></script>
</head>
<body>
<div id="tagcloud" style="width: 80%; height: 450px; align-self: center;"></div>
</body>
</html>
<script>
var word_array = [
{text: "Lorem", weight: 15},
{text: "Ipsum", weight: 9, link: "http://jquery.com/"},
{text: "Dolor", weight: 6, html: {title: "I can haz any html attribute"}},
{text: "Sit", weight: 7},
{text: "Amet", weight: 5},
{text: "Amet", weight: 8},
{text: "Amet", weight: 9},
{text: "Amet", weight: 3},
{text: "Amet", weight: 6},
// ...as many words as you want
];
$(function() {
// When DOM is ready, select the container element and call the jQCloud method, passing the array of words as the first argument.
$("#tagcloud").jQCloud(word_array,{
shape:'elliptic' //修改形状elliptic'
或'rectangular'
默认 椭圆
});
});
</script>
<style>
// 自定义字体大小 字体颜色
div.jqcloud span.w10 { color: #488fec; }
div.jqcloud span.w9 { color: #e8e1b6; }
div.jqcloud span.w8 { color: #bd3b39; }
div.jqcloud span.w7 { color: #35bdeb; }
div.jqcloud span.w6 { color: #00c3c5; }
div.jqcloud span.w5 { color: #488fec; }
div.jqcloud span.w4 { color: #e8e1b6; }
div.jqcloud span.w3 { color: #bd3b39; }
div.jqcloud span.w2 { color: #35bdeb; }
div.jqcloud span.w1 { color: #ba3531; } div.jqcloud span.w10 { font-size: 36px; }
div.jqcloud span.w9 { font-size: 20px; }
div.jqcloud span.w8 { font-size: 28px; }
div.jqcloud span.w7 { font-size: 16px; }
div.jqcloud span.w6 { font-size: 40px; }
div.jqcloud span.w5 { font-size: 18px; }
div.jqcloud span.w4 { font-size: 16px; }
div.jqcloud span.w3 { font-size: 36px; }
div.jqcloud span.w2 { font-size: 24px; }
div.jqcloud span.w1 { font-size: 20px; }
</style>
最新文章
- CentOS7配置日志(VirtualBox)
- WCF SOA --- AJAX 跨域请求处理 CORS for WCF
- MyEclipse里项目部署到tomcat上之后,tomcat webpps文件夹里为什么找不到这个项目
- HDU_2023——求平均成绩
- SqlCacheDependency的使用
- Chapter 1 First Sight——9
- HDU 1724 Ellipse [辛普森积分]
- Linux下挂载新硬盘方法
- iOS学习——自动定位
- Twitter分布式自增ID算法snowflake原理解析
- ASP.NET Core 部署IIS及 OFFSET 附近有语法错误解决
- ACM山东工商 栈和队列算法练习
- Windows10中使用Anaconda安装keras-gpu版本(遇到的坑)
- Scrapy (网络爬虫框架)入门
- HTML5⑥
- ubuntu 16.04 安装 网易云
- [CocoaPods]制作CocoaPod
- 实例:使用puppeteer headless方式抓取JS网页
- shlve 模块
- Makefile内置变量,递归式变量,直接展开式变量,条件赋值,追加赋值
热门文章
- How is javascript asynchronous AND single threaded?
- 联想Y430P CentOS 7.3 无线网络的配置
- linux系统预留内存和磁盘大小
- Python——os.path.dirname(__file__) 与 os.path.join(str,str)
- 使用 mybatis + flying-0.9.4 的电商后端
- 如何为Apache JMeter开发插件(二)—第一个JMeter插件
- excel表格快捷键
- video视频播放以及主流浏览器兼容
- Hibernate学习之属性级别注解
- macOS10.12部署sonarqube5.6.3