首页站长学院织梦CMS教程正文

投稿赚钱

织梦DEDECMS多彩色TAG做法

模板二团织梦CMS教程

2021-07-28 0 6,716

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

作用方法：

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

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

代码如下：

.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>

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>

收藏 (0) 打赏

您的支持是我们前进最大的动力！

打开微信扫一扫，即可进行扫码打赏哦

本站声明：根据2013年1月30日《计算机软件保护条例》2次修订第17条规定：为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬，鉴于此，也希望大家遵守相关法律法规使用、研究软件。 1、本站所有资源来源于用户上传和网络，因此不包含技术服务请大家谅解。 2、下载用户仅供学习交流，若使用商业用途，请购买正版授权，否则产生的一切后果将由下载用户自行承担。 3、站内资源均来源于网络公开发表文件或网友投稿发布，如侵犯您的权益，请联系管理员处理。 4、本站不保证所提供下载的资源的准确性、安全性和完整性，资源仅供下载学习之用，如有链接无法下载、失效或广告，请联系客服处理。 5、所有资源均收集于互联网仅供学习、参考和研究，请理解这个概念，所以不能保证每个细节都符合你的需求，也可能存在未知的BUG与瑕疵，因本站资源均为可复制品，所以不支持任何理由的退款兑现，请熟知后再下载。

彤彤模板团织梦CMS教程织梦DEDECMS多彩色TAG做法 https://www.xiaoyuerqingfen.cn/4573.html