一个自制的Tag Cloud插件，基于jQuery
一个自制的基于jquery的插件，代码如下：
// jquery.tag_cloud.js
jQuery.fn.tagCloud = function(params){
var max = function(arr){
var _tmp = null;
for(var i in arr) {
if(_tmp) {
_tmp = _tmp > arr[i] ? _tmp : arr[i];
}
else {
_tmp = arr[i];
}
}
return _tmp;
}
var min = function(arr){
var _tmp = null;
for(var i in arr) {
if(_tmp) {
_tmp = _tmp < arr[i] ? _tmp : arr[i];
}
else {
_tmp = arr[i];
}
}
return _tmp;
}
var _class = params.tag_class;
var _count_attr = params.count_attr;
var _max_size = params.max_size;
var _min_size = params.min_size;
var tag_arr = $(this).find('.' + _class);
var count_arr = [];
tag_arr.each(function(){
count_arr.push($(this).data(_count_attr));
})
var _max = max(count_arr);
var _min = min(count_arr);
tag_arr.each(function(){
$(this).css({
fontSize: parseInt( (_max_size - _min_size ) * ($(this).data(_count_attr) - _min ) / ( _max - _min ) + _min_size)
})
})
}
// html:
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.tag_cloud.js"></script>
<style type="text/css">
#tag_cloud {
width: 150px;
border: 1px solid #CCC;
padding: 5px;
}
#tag_cloud a {
text-decoration: none;
display: block;
float: left;
margin: 4px;
}
</style>
<meta charset="utf-8"/>
</head>
<body>
<div id="tag_cloud">
<a href="http://ctquan.com/search_startups/11/移动" class="tag" data-count="10">移动</a>
<a href="http://ctquan.com/search_startups/11/新能源" class="tag" data-count="20">新能源</a>
<a href="http://ctquan.com/search_startups/11/传媒娱乐" class="tag" data-count="15">传媒娱乐</a>
<a href="http://ctquan.com/search_startups/11/电子商务" class="tag" data-count="10">电子商务</a>
<a href="http://ctquan.com/search_startups/11/电脑硬件" class="tag" data-count="8">电脑硬件</a>
<div style="clear: both;"></div>
</div>
<script type="text/javascript">
// 利用一个hash来自由配置想要实现的字号范围以及标签云使用的HTML相关属性
$('#tag_cloud').tagCloud({
tag_class : 'tag',
count_attr : 'count',
max_size : 30,
min_size : 8
});
</script>
</body>
</html>
// jquery.tag_cloud.js
jQuery.fn.tagCloud = function(params){
var max = function(arr){
var _tmp = null;
for(var i in arr) {
if(_tmp) {
_tmp = _tmp > arr[i] ? _tmp : arr[i];
}
else {
_tmp = arr[i];
}
}
return _tmp;
}
var min = function(arr){
var _tmp = null;
for(var i in arr) {
if(_tmp) {
_tmp = _tmp < arr[i] ? _tmp : arr[i];
}
else {
_tmp = arr[i];
}
}
return _tmp;
}
var _class = params.tag_class;
var _count_attr = params.count_attr;
var _max_size = params.max_size;
var _min_size = params.min_size;
var tag_arr = $(this).find('.' + _class);
var count_arr = [];
tag_arr.each(function(){
count_arr.push($(this).data(_count_attr));
})
var _max = max(count_arr);
var _min = min(count_arr);
tag_arr.each(function(){
$(this).css({
fontSize: parseInt( (_max_size - _min_size ) * ($(this).data(_count_attr) - _min ) / ( _max - _min ) + _min_size)
})
})
}
// html:
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.tag_cloud.js"></script>
<style type="text/css">
#tag_cloud {
width: 150px;
border: 1px solid #CCC;
padding: 5px;
}
#tag_cloud a {
text-decoration: none;
display: block;
float: left;
margin: 4px;
}
</style>
<meta charset="utf-8"/>
</head>
<body>
<div id="tag_cloud">
<a href="http://ctquan.com/search_startups/11/移动" class="tag" data-count="10">移动</a>
<a href="http://ctquan.com/search_startups/11/新能源" class="tag" data-count="20">新能源</a>
<a href="http://ctquan.com/search_startups/11/传媒娱乐" class="tag" data-count="15">传媒娱乐</a>
<a href="http://ctquan.com/search_startups/11/电子商务" class="tag" data-count="10">电子商务</a>
<a href="http://ctquan.com/search_startups/11/电脑硬件" class="tag" data-count="8">电脑硬件</a>
<div style="clear: both;"></div>
</div>
<script type="text/javascript">
// 利用一个hash来自由配置想要实现的字号范围以及标签云使用的HTML相关属性
$('#tag_cloud').tagCloud({
tag_class : 'tag',
count_attr : 'count',
max_size : 30,
min_size : 8
});
</script>
</body>
</html>