• 全国400电话网上服务平台
    强大号码库资源任选,方便,快捷,快速开通。
    咨询热线:400-1100-266  

    dedecms标签云效果《二》
    POST TIME:2018-08-09 01:00

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

    使用方法:
    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(‘’ + e(c) + ‘’, ‘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随机读出的,想要什么颜色都可以自定义,自己找个颜色截取器弄,不过我都弄得很大众化了,没事不需要改

    
    关于我们 | 付款方式 | 建站知识 | 增值服务 | 网站模板
    Copyright © 2003-2016
    时间:9:00-21:00 (节假日不休)
    版权所有:巨人网络(扬州)科技有限公司
    总部地址:江苏省信息产业基地11号楼四层
    《增值电信业务经营许可证》 苏B2-20120278
    X

    截屏,微信识别二维码

    微信号:veteran88

    (点击微信号复制,添加好友)

     打开微信

    微信号已复制,请打开微信添加咨询详情!