织梦DEDECMS多彩色TAG做法

dede模板实现彩色TAG代码主要由JS+CSS实现

作用方法:

1、建一个新的*.html文档,将以下代码拷进去,然后保存

2、在首页相应的位置进行调用

代码如下:




  1. <styletype="text/css">
  2. .tagCloud{padding:06px;}
  3. .tagClouda{margin:08px00;line-height:22px;}
  4. .color0{color:#2F5FC2;}
  5. .color1{color:#AC1BF2;}
  6. .color2{color:#9E6FC5;}
  7. .color3{color:#FBA426;}
  8. .color4{color:#2739CF;}
  9. .color5{color:#C8A453;}
  10. .color6{color:#AB2846;}
  11. .weight0{font-weight:100;}
  12. .weight1{font-weight:300;}
  13. .weight2{font-weight:500;}
  14. .weight3{font-weight:700;}
  15. .weight4{font-weight:900;}
  16. .weight5{font-weight:bold;}
  17. .weight6{font-weight:bolder;}
  18. .size0{font-size:12px;}
  19. .size1{font-size:13px;}
  20. .size2{font-size:14px;}
  21. .size3{font-size:16px;}
  22. .size4{font-size:20px;}
  23. .size5{font-size:22px;}
  24. .size6{font-size:24px;}
  25. </style>
  26. <scriptlanguage="javascript"type="text/javascript">
  27. functionsetTagCloudStyle(){
  28. varcolors=newArray("color0","color1","color2","color3","color4",
  29. "color5","color6");
  30. varsizes=newArray("size0","size1","size2","size3");
  31. varweights=newArray("weight0","weight1","weight2","weight3",
  32. "weight4","weight5","weight6");
  33. varcolorsLen=colors.length;//获取颜色样式个数
  34. varsizesLen=sizes.length;//获取字体大小样式个数
  35. varweightsLen=weights.length;//获取字体粗细样式个数
  36. vartagCloud=document.getElementById("tagCloud");
  37. vartagLinks=tagCloud.getElementsByTagName("a");
  38. vartagLinksLen=tagLinks.length;
  39. for(i=0;i<tagLinksLen;i++){
  40. tagLinks[i].className=colors[Math.floor(colorsLen*Math.random())]+"
  41. "+sizes[Math.floor(sizesLen*Math.random())]+""+ weights[Math.floor(weightsLen*Math.random())];
  42. //随机设置每个<a>标签的样式,以实现不同效果.
  43. }
  44. }
  45. if(document.addEventListener){
  46. window.addEventListener('load',setTagCloudStyle,false);
  47. }else{
  48. window.attachEvent('onload',setTagCloudStyle);
  49. }
  50. //绑定onload事件,在文档载入完毕启动setTagCloudStyle()函数;
  51. </script>
  52. <divclass="tagCloud"id="tagCloud">{dede:tagrow='20'getall='1'sort='month'}<ahref='http://www.dede58.com/[field:link/]'>[field:tag/]</a>{/dede:tag}</div>
版权免责声明

① 本站VIP源码资源永久免费下载 www.wayu.cn
② 本网站资源来源于网络收集,如有侵权,请联系站长进行删除处理。
③ 分享目的仅供大家学习和交流,请不要用于商业用途,否则后果自负。
④ 如果你有源码需要出售,可以联系小编,或者点击 投稿
⑤ 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解。
⑥ 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需。
⑦ 在您的能力范围内,为了大环境的良性发展,请尽可能的选择正版资源。
⑧ 网站资源不做任何二次加密和授权后门(原版加密除外)

评论0

请先

没有账号? 忘记密码?