一、展示效果
二、代碼展示
index.html
<!DOCTYPE html>
<html>
<head>
<title>詞雲</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/jqcloud.css" />
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jqcloud-1.0.4.min.js"></script>
<script type="text/javascript" src="js/cloud.js"></script>
</head>
<body>
<div id="word_div" style="width: 100%; height: 800px; border: 1px solid #ccc;"></div>
</body>
<script type="text/javascript">
var data = [
['Java', 90],
['PHP', 26],
['MySQL', 80],
['Python', 77],
['Oracle', 96],
['SQL Server', 29],
['Spring ', 57],
['Spring Data', 42],
['JDBC', 19],
['Tomcat', 39],
['Nginx', 66],
['DB2', 24],
['Spring MVC', 58],
['C', 6],
['C++', 70],
['Limbo ', 45],
['S2', 59],
['Amiga Basic', 92],
['COBOL', 82],
['Unicon ', 10],
['FORTRAN II ', 63],
['Revolution ', 14],
['Haxe ', 45],
['Html', 57],
['Css', 8],
['JavaScript', 68],
['Windows PowerShell', 38],
['C#', 51],
['Spring AMQP', 80],
['SpringBoot', 90],
['SpringCloud', 84],
['Spring JDBC', 13],
['MyBatis', 89],
['Spring WebService', 35],
['SpringKAFKA', 48],
['Java ', 91],
['PHP ', 28],
['MySQL ', 85],
['Python ', 19],
['Oracle ', 63],
['SQL Server ', 4],
['Spring ', 72],
['Spring Data ', 28],
['JDBC ', 28],
['Tomcat ', 95],
['Nginx ', 73],
['DB2 ', 68],
['Spring MVC ', 18],
['C ', 19],
['C++ ', 75],
['Limbo ', 63],
['S2 ', 33],
['Amiga Basic ', 15],
['COBOL ', 41],
['Unicon ', 82],
['FORTRAN II ', 80],
['Revolution ', 91],
['Haxe ', 17],
['Html ', 45],
['Css ', 90],
['JavaScript ', 38],
['Windows PowerShell ', 94],
['C# ', 45],
['Spring AMQP ', 71],
['SpringBoot ', 17],
['SpringCloud ', 31],
['Spring JDBC ', 10],
['MyBatis ', 44],
['Spring WebService ', 49],
['SpringKAFKA ', 32]
];
var string_ = "";
for(var i = 0; i < data.length; i++) {
var string_f = data[i][0];
var string_n = data[i][1];
string_ += "{text: '" + string_f + "', weight: '" + string_n + "',html: {'class': 'span_list',onmouseover:'on_mouseover(this,event)',onmouseout:'on_mouseout()'}},";
}
var string_list = string_;
var word_list = eval("[" + string_list + "]");
$(function() {
$("#word_div").jQCloud(word_list, {});
});
</script>
</html>
三、目錄結構
四、項目下載