dedecms标签云效果《二》

之前论坛有人发过这个教程,现在我把改良美化过后的代码发出来。使用方法:index.html 模板 例如 div class=pright 后面加入 (位置随你) 复制代码 …

之前论坛有人发过这个教程,现在我把改良美化过后的代码发出来。

使用方法:
index.html 模板 例如 <div class="pright"> 后面加入 (位置随你)

  1. <div id="tagCloud" class="hot mt1">
  2. <dl class="tbox light">
  3.         <dt class=’light’><strong>热点标签Tags</strong></dt>
  4.         <dd class=’light’>
  5. {dede:tag sort=’rand’ row=’40′ getall=’1′}<a href=’[field:link/]‘>[field:tag /]</a>{/dede:tag}
  6.   </dd>
  7.       </dl>
  8. </div>

css

  1. #tagCloud a{
  2. text-decoration:none;
  3. padding:3px;
  4. }
  5. #tagCloud a:hover{
  6. background:#69f;
  7. color:#fff;
  8. }
  9. .color0{
  10. color:#76B504;
  11. }
  12. .color1{
  13. color:#AC1BF2;
  14. }
  15. .color2{
  16. color:#9E6FC5;
  17. }
  18. .color3{
  19. color:#FBA426;
  20. }
  21. .color4{
  22. color:#CAC83B;
  23. }
  24. .color5{
  25. color:#C8A453;
  26. }
  27. .color6{
  28. color:#AB2846;
  29. }
  30. .weight0{
  31. font-weight:100;
  32. }
  33. .weight1{
  34. font-weight:300;
  35. }
  36. .weight2{
  37. font-weight:500;
  38. }
  39. .weight3{
  40. font-weight:700;
  41. }
  42. .weight4{
  43. font-weight:900;
  44. }
  45. .weight5{
  46. font-weight:bold;
  47. }
  48. .weight6{
  49. font-weight:bolder;
  50. }
  51. .size0{
  52. font-size:12px;
  53. }
  54. .size1{
  55. font-size:13px;
  56. }
  57. .size2{
  58. font-size:14px;
  59. }
  60. .size3{
  61. font-size:15px;
  62. }
  63. .size4{
  64. font-size:16px;
  65. }
  66. .size5{
  67. font-size:17px;
  68. }
  69. .size6{
  70. font-size:18px;
  71. }

js代码(2个js代码一样,任选一个,第一个为压缩过的,可以提升页面加载速度,第二个为普通未压缩),建议放到模板最后

  1. <script language="javascript" type="text/javascript">
  2.     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, {}))
  3. </script>

  1. function setTagCloudStyle() {
  2.     var colors = new Array("color0", "color1", "color2", "color3", "color4", "color5", "color6");
  3.     var sizes = new Array("size0", "size1", "size2", "size3", "size4", "size5", "size6");
  4.     var weights = new Array("weight0", "weight1", "weight2", "weight3", "weight4", "weight5", "weight6");
  5.     var colorsLen = colors.length;
  6.     var sizesLen = sizes.length;
  7.     var weightsLen = weights.length;
  8.     var tagCloud = document.getElementById("tagCloud");
  9.     var tagLinks = tagCloud.getElementsByTagName("a");
  10.     var tagLinksLen = tagLinks.length;
  11.     for (i = 0; i < tagLinksLen; i++) {
  12.         tagLinks[i].className = colors[Math.floor(colorsLen * Math.random())] + " " + sizes[Math.floor(sizesLen * Math.random())] + " " + weights[Math.floor(weightsLen * Math.random())]
  13.  
  14.     }
  15.  
  16. }
  17. if (document.addEventListener) {
  18.     window.addEventListener(‘load’, setTagCloudStyle, false)
  19.  
  20. } else {
  21.     window.attachEvent(‘onload’, setTagCloudStyle)
  22.  
  23. }

css代码中 size 字体大小,color 颜色,weight 字体粗细

这些0-6是js随机读出的,想要什么颜色都可以自定义,自己找个颜色截取器弄,不过我都弄得很大众化了,没事不需要改

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

通常我们在做织梦模板时都会为标题设置titlelen或者直接来截取了标题长度,然后又希望在鼠标移动到标题的时候,能显示完整的织梦标题,我们以为使用下面的代码就可以完成:a title=”[field:title/]” href…
问:想和你咨询个问题,就是我用的dede在后台添加一篇文章dede就死机了。是怎么回事的。我是部队上的,是自己的服务器的。答:一直是这样死机还是突然是这样呢?问:也不是一直也不是突然的,我以的的系统有…
织梦图片集 上传图片不能上传 弹出提示302这个问题是前两天遇到的,有位神人已经解决了。方法分享给大家,如下:解决方法是:在include/userlogin.class.php文件中的第二行session_star…
关于dede织梦cms如何防止黑客攻击的几点建议 这些方法也是从网上搜集的 希望对大家有用1、修改后台目录:安装好网站之后第一步就应该修改后台目录,把默认的dede随意改成其他名字,最好是MD5加密形式的;(一般…
安装织梦dedecms程序后程序后台主页会提示出需要修改管理员名称,但是从后台默认是改不了的,修改时提示不能修改id为1的管理员名称,下面将如何修改织梦(dede)cms修改管理员名称的方法提供给大家:用后台的sql…
自从dedecms织梦系统更新到6.7日的版本,底部版权信息调用标签{dede:global.cfg_powerby/}会自动加上织梦官方 的链接[PowerbyDedeCms],想必很多新用户使用中都想去除这个官方的链接,由于这是官方的作为,本文…