jqcloud 标签云效果
官网地址: http://mistic100.github.io/jQCloud/index.html
github 地址: 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>