标签云效果-让你的TAG展示效果与众不同-Tag-Cloud- javascript实现

发现别人网站上面的标签显示效果很是不错，可是不知道为什么在科讯论坛搜索了半天愣是什么都没有找到！很是无语还是大家都不需要这个东西？至少我是感觉不错，本人的郑州家政网已经实现标签云的效果了；比较满意！

什么是标签云呢？本人从百科上拷贝了一段：
标签云（Tag Cloud）是用以表示一个网站中的内容标签。标签的排列顺序一般依照字典排序，按照热门程度确定字体的大小和颜色。这样，依照字典或者热门程度来寻找信息便成为可能。标签通常是超链接，指向分类页面。

下面就详细说说我是怎么利用Tag-Cloud- javascript实现标签云效果的！主要由三部分组成：

模板页代码：

&lt;div id="tagCloud" class="yellowpage In_Tag"&gt;
    &lt;div class="title"&gt;热门TAG&lt;span&gt;&lt;a href="{$GetSiteUrl}plus/tags.asp" target="_blank" title="热点家政标签Tags"&gt;更多&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;div class="content"&gt;{=GetTags(1,25)}&lt;/div&gt;
    &lt;div class="bottom"&gt;&lt;/div&gt;
&lt;/div&gt;

<div class="title">热门TAG<span><a href="{$GetSiteUrl}plus/tags.asp" target="_blank" title="热点家政标签Tags">更多</a></span></div>

<div class="content">{=GetTags(1,25)}</div>

</div>

css代码：

#tagCloud a{ text-decoration:none; padding:3px; }
#tagCloud a:hover{ background:#69f; color:#fff; }
.color0{ color:#76B504; }
.color1{ color:#AC1BF2; }
.color2{ color:#9E6FC5; }
.color3{color:#FBA426; }
.color4{ color:#CAC83B; }
.color5{ color:#C8A453; }
.color6{ color:#AB2846; }
.weight0{ font-weight:100; }
.weight1{ font-weight:300; }
.weight2{ font-weight:500; }
.weight3{ font-weight:700; }
.weight4{ font-weight:900; }
.weight5{ font-weight:bold; }
.weight6{ font-weight:bolder; }
.size0{ font-size:12px; }
.size1{ font-size:13px; }
.size2{ font-size:14px; }
.size3{ font-size:15px; }
.size4{ font-size:16px; }
.size5{ font-size:17px; }
.size6{ font-size:18px; }

#tagCloud a{ text-decoration:none; padding:3px; }

#tagCloud a:hover{ background:#69f; color:#fff; }

.color0{ color:#76B504; }

.color1{ color:#AC1BF2; }

.color2{ color:#9E6FC5; }

.color3{color:#FBA426; }

.color4{ color:#CAC83B; }

.color5{ color:#C8A453; }

.color6{ color:#AB2846; }

.weight0{ font-weight:100; }

.weight1{ font-weight:300; }

.weight2{ font-weight:500; }

.weight3{ font-weight:700; }

.weight4{ font-weight:900; }

.weight5{ font-weight:bold; }

.weight6{ font-weight:bolder; }

.size0{ font-size:12px; }

.size1{ font-size:13px; }

.size2{ font-size:14px; }

.size3{ font-size:15px; }

.size4{ font-size:16px; }

.size5{ font-size:17px; }

.size6{ font-size:18px; }

javascript代码：

<script language="javascript" type="text/javascript">
                eval(function(p, a, c, k, e, d) { e = function(c) { return (c < a ? '' : e(parseInt(c / a))) + ((c = c % a) > 35 ? String.fromCharCode(c + 29) : c.toString(36)) }; if (!''.replace(/^/, String)) { while (c--) { d[e(c)] = k[c] || e(c) } k = [function(e) { return d[e] } ]; e = function() { return '\\w+' }; c = 1 }; while (c--) { if (k[c]) { p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]) } } return p } ('G d(){1 4=9 b("E","K","x","w","v","y","u");1 5=9 b("B","A","C","n","p","o","t");1 6=9 b("r","z","S","N","M","O","D");1 k=4.3;1 l=5.3;1 m=6.3;1 8=h.P("8");1 7=8.Q("a");1 j=7.3;F(i=0;i<j;i++){7[i].H=4[2.c(k*2.e())]+" "+5[2.c(l*2.e())]+" "+6[2.c(m*2.e())]}}J(h.g){f.g(\'R\',d,s)}q{f.I(\'L\',d)}', 55, 55, '|var|Math|length|colors|sizes|weights|tagLinks|tagCloud|new||Array|floor|setTagCloudStyle|random|window|addEventListener|document||tagLinksLen|colorsLen|sizesLen|weightsLen|size3|size5|size4|else|weight0|false|size6|color6|color4|color3|color2|color5|weight1|size1|size0|size2|weight6|color0|for|function|className|attachEvent|if|color1|onload|weight4|weight3|weight5|getElementById|getElementsByTagName|load|weight2'.split('|'), 0, {}))
            </script

eval(function(p, a, c, k, e, d) { e = function(c) { return (c < a ? '' : e(parseInt(c / a))) + ((c = c % a) > 35 ? String.fromCharCode(c + 29) : c.toString(36)) }; if (!''.replace(/^/, String)) { while (c--) { d[e(c)] = k[c] || e(c) } k = [function(e) { return d[e] } ]; e = function() { return '\\w+' }; c = 1 }; while (c--) { if (k[c]) { p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]) } } return p } ('G d(){1 4=9 b("E","K","x","w","v","y","u");1 5=9 b("B","A","C","n","p","o","t");1 6=9 b("r","z","S","N","M","O","D");1 k=4.3;1 l=5.3;1 m=6.3;1 8=h.P("8");1 7=8.Q("a");1 j=7.3;F(i=0;i<j;i++){7[i].H=4[2.c(k*2.e())]+" "+5[2.c(l*2.e())]+" "+6[2.c(m*2.e())]}}J(h.g){f.g(\'R\',d,s)}q{f.I(\'L\',d)}', 55, 55, '|var|Math|length|colors|sizes|weights|tagLinks|tagCloud|new||Array|floor|setTagCloudStyle|random|window|addEventListener|document||tagLinksLen|colorsLen|sizesLen|weightsLen|size3|size5|size4|else|weight0|false|size6|color6|color4|color3|color2|color5|weight1|size1|size0|size2|weight6|color0|for|function|className|attachEvent|if|color1|onload|weight4|weight3|weight5|getElementById|getElementsByTagName|load|weight2'.split('|'), 0, {}))

</script

使用kesionCMS的朋友可以直接使用，其他朋友则只需要将代码中的“{=GetTags(1,25)} ”换成相对应的标签就可以了！颜色也是改变的，只是演示站上我把颜色这个给做了屏蔽，以上是正常的，大家可以看看效果。

演示地址可以看：http://www.21863.cn

再给添加一个演示地址：3dLable

标签云效果-让你的TAG展示效果与众不同-Tag-Cloud- javascript实现

性格内向的人如何融入新环境

找准自己的位置-摆正心态

参与评论

快速导航

标签云效果-让你的TAG展示效果与众不同-Tag-Cloud- javascript实现

分享本文封面

相关文章

参与评论

登录

快速导航