您现在的位置是:首页 > cms教程 > DedeCMS教程DedeCMS教程

dedecms标签云优化代码实例

俞贡延2023-10-29DedeCMS教程已有人查阅

导读之前论坛有人发过这个教程,现在我把改良美化过后的代码发出来。js代码(2个js代码一样,任选一个,第一个为压缩过的,可以提升页面加载速度,第二个为普通未压缩)

之前论坛有人发过这个教程,现在我把改良美化过后的代码发出来。
使用方法:
index.html 模板 例如 <div class="pright"> 后面加入 (位置随你)
<div id="tagCloud" class="hot mt1"> <dl class="tbox light">
   <dt class=’light’><strong>热点标签Tags</strong></dt>
   <dd class=’light’> {dede:tag sort=’rand’ row=’40′ getall=’1′}<a href=’[field:link/]‘>[field:tag /]</a>{/dede:tag}
  </dd>
  </dl>
</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;
 }
js代码(2个js代码一样,任选一个,第一个为压缩过的,可以提升页面加载速度,第二个为普通未压缩),建议放到模板之后
<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>
function setTagCloudStyle() {
    var colors = new Array("color0", "color1", "color2", "color3", "color4", "color5", "color6");
    var sizes = new Array("size0", "size1", "size2", "size3", "size4", "size5", "size6");
    var weights = new Array("weight0", "weight1", "weight2", "weight3", "weight4", "weight5", "weight6");
    var colorsLen = colors.length;     var sizesLen = sizes.length;     var weightsLen = weights.length;
    var tagCloud = document.getElementById("tagCloud");     var tagLinks = tagCloud.getElementsByTagName("a");     var tagLinksLen = tagLinks.length;
    for (i = 0; i < tagLinksLen; i++) {
        tagLinks[i].className = colors[Math.floor(colorsLen * Math.random())] + " " + sizes[Math.floor(sizesLen * Math.random())] + " " + weights[Math.floor(weightsLen * Math.random())]
      }
  }
if (document.addEventListener) {
    window.addEventListener(‘load’, setTagCloudStyle, false)
  } else {
    window.attachEvent(‘onload’, setTagCloudStyle)
      }
css代码中 size 字体大小,color 颜色,weight 字体粗细这些0-6是js随机读出的,想要什么颜色都可以自定义,自己找个颜色截取器弄,不过我都弄得很大众化了,没事不需要改

本文标签:织梦cms标签 

很赞哦! ()

相关源码

  • (自适应)帝国cms7.5文章新闻博客整站源码( 带会员中心)本模板基于帝国CMS内核开发,为新闻资讯、个人博客及作品展示类网站设计。采用响应式布局技术,确保在手机、平板和电脑等不同设备上都能获得良好的浏览体验。查看源码
  • (PC+WAP)绿色市政园林建筑设计绿化营销型pbootcms网站模板本模板基于PbootCMS系统开发,为园林绿化、景观设计类企业设计,特别适合市政园林、景观工程、绿化养护等企业使用。采用双端适配技术查看源码
  • (PC+WAP)蓝色自动电动闸门伸缩门类网站pbootcms模板下载为电动闸门、自动伸缩门企业设计的响应式网站模板,突出产品展示与技术优势,助力门控设备企业建立专业数字化形象。手工编写DIV+CSS结构,代码精简高效,无冗余代码干扰,加载速度更快。查看源码
  • (自适应响应式)瓷砖大理石装修建材类网站pbootcms模板html5模板本模板基于PbootCMS开发,针对瓷砖、大理石等建材行业特点进行优化设计。采用响应式布局技术,确保产品展示效果在不同设备上都能合理呈现。模板特别强化了石材纹理的视觉表现力,帮助建材企业更好地展示产品质感。查看源码
  • (自适应)蓝色英文外贸电子科技产品带三级栏目网站模板为外贸企业设计的英文网站模板,基于PbootCMS系统开发。突出多语言支持和国际化布局,三级栏目结构清晰展示产品分类,响应式设计确保更好客户在移动端和PC端获得一致的专业体验。查看源码
  • (PC+WAP)蓝色玻璃纤维制品环保设备营销型pbootcms模板源码下载这是一款针对玻璃纤维行业特点设计的网站模板,采用蓝色系配色方案,体现工业感和环保理念。模板包含产品中心、应用案例、技术支持和新闻动态等核心模块,能够全面展示玻璃纤维制品的技术参数和应用场景。查看源码
分享笔记 (共有 篇笔记)
验证码:

本栏推荐