您当前的位置: 主页 > 优化教程
 dede模板实现彩色TAG代码主要由JS+CSS实现
 
 
作用方法:
 
1、建一个新的*.html文档,将以下代码拷进去,然后保存
 
2、在首页相应的位置进行调用
 
代码如下:
 
<style type="text/css" > 
.tagCloud{ padding:0 6px; } 
.tagCloud a { margin:0 8px 0 0; line-height:22px; } 
.color0{ color:#2F5FC2; } 
.color1{ color:#AC1BF2; } 
.color2{ color:#9E6FC5; } 
.color3{ color:#FBA426; } 
.color4{ color:#2739CF; } 
.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:16px; } 
.size4{ font-size:20px; } 
.size5{ font-size:22px; } 
.size6{ font-size:24px; } 
</style> 
 <script language="javascript" type="text/javascript"> 
 function setTagCloudStyle(){ 
  var colors = new Array("color0","color1","color2","color3","color4",
  "color5","color6"); 
  var sizes = new Array("size0","size1","size2","size3"); 
  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())]; 
   //随机设置每个<a>标签的样式,以实现不同效果. 
  } 
 } 
 
 if(document.addEventListener){ 
  window.addEventListener('load',setTagCloudStyle,false); 
 }else{ 
  window.attachEvent('onload',setTagCloudStyle); 
 } 
 //绑定onload事件,在文档载入完毕启动setTagCloudStyle()函数; 
</script> 
<div class="tagCloud" id="tagCloud">{dede:tag row='20' getall='1' sort='month'}<a href='http://www.genban.org/[field:link/]'>[field:tag /]</a>{/dede:tag}</div> 
 

关键词:织梦,DEDECMS,多,彩色,TAG,做法,dede,模板    标签:
    更多资讯请收藏关注 网站模板(www.1yc.cn)

dedecms5.7调用会员登录 显示登陆状态一下代码就是 调用会员登陆状态,退出,显示注册和登陆 {dede:ph... 2021-07-27
DedeCms栏目列表标题第x页序号的完美修改方法之前,AB模板网小编给大家介绍过DedeCms5.1列表标题增加序号、... 2021-07-22
dedecms自动审核会员发表的最新文章实现方法本文介绍了dedecms中自动审核会员发表的最新文章的方法,DEDE的... 2021-07-27
DEDECMS启用SSL和多站点支持HTTPS访问后域名重复的解决办法启用SSL开启HTTPS访问后,发现DEDE,对设置动态浏览的文章出现... 2021-07-22
织梦dede首页列表页调用文章内容在使用dede的过程中,我们通常会调用文章内容在首页或者列表页面,官方... 2021-07-27
dedecms织梦生成Google Sitemap的方法、在模版目录新建一个sitemap.htm文件,代码如下: ?xml ... 2021-07-22
织梦文章页怎么调用有相同tag标签或关键词的文章列表今天需要做一个视频栏目,相同的主题下有多个视频,想要实现类似连播的效果... 2021-07-22
dede:globalautoindex 标签起始数值修改在开始循环的外面写 {dede:globalautoindex fun... 2021-08-09
DedeCMS用channelartlist调用顶级栏目及列表这个标签全局都可使用,可以减少多次使用 {dede:arclist t... 2021-08-14
织梦调用副栏目下文章数量方法在织梦文件目录打开include/common.func.php文件,... 2021-07-22
DedeCMS文章编辑不更新时间1970年1月1日在修改文章或者后期优化的时候,织梦dedecms5.7版本存在一个问题... 2021-07-30
百度编辑器ueditor的高亮代码自动适应设备宽度及自动换行百度编辑器的代码高亮部分非常好看,但是有时候代码过长,在后台预览时没有... 2021-07-22
织梦DEDECMS网站添加随机文章在织梦网站中添加随机文章的代码其实很简单,在DEDE默认文章内容页模板... 2021-07-27
织梦DEDECMS栏目获取无限子分类的方法织梦DEDECMS栏目获取无限子分类的方法 。 提示:首先要把/inc... 2021-07-30
Dedecms栏目列表页面模板对seotitle的判断为了能够有更好的SEO效果,在制作 织梦模板 的过程中,我们要考虑的东... 2021-07-30
dedecmsdedecmsdede:channel标签的数字递增调用方法我们知道文章调用支持autoindex 但channel 不支持,那如... 2021-08-09
织梦如何获取与当前短标题一样有关的文章通过织梦当前文章的短标题获取相同短短标题的文章 在extend.fun... 2021-07-30
织梦利用[field:global.autoindex /]打造文章排行榜代码前几天用织梦给朋友做了一站,期间用到了一个排行榜的效果,虽然代码很简单... 2021-07-22
织梦如何根据软件栏目下载的次数进行排序即使站长朋友都知道dedecms的安全问题会导致在php免备案空间中挂... 2021-08-14

线
咨询热线:
135-0038-3336
在线客服:
点击这里给我发消息
微信交流:
公司官网: www.1yc.cn