您当前的位置: 主页 > 优化教程
本文实例讲述了Dedecms实现tags云标签随机颜色与字体大小方法。AB模板网分享给大家供大家参考。具体分析如下:
 
这里给大家介绍三种tags云标签随机颜色与字体大小方法,包括直接在dedecms中进行二次开发,另一种利用jquery与js来获取指定div中的A标签并设置连接颜色与字体大小.
 
修改方法:
 
1、在/include/common.func.php 中加入如下函数,代码如下:
 
代码如下:function getTagStyle()
{
$minFontSize=8; //最小字体大小,可根据需要自行更改
$maxFontSize=18; //最大字体大小,可根据需要自行更改
return 'font-size:'.($minFontSize+lcg_value()*(abs($maxFontSize-$minFontSize))).'px;color:#'.dechex(rand(0,255)).dechex(rand(0,196)).dechex(rand(0,255));
}
在模板中用如下代码调用标签,代码如下:
 
代码如下:
 
{dede:tag row='45' getall='1' sort='hot'}
<a href='[field:link/]' title="[field:tag /]([field:total /])" style="[field:total runphp=yes]@me=getTagStyle();[/field:total]">[field:tag /]</a>
{/dede:tag}
 
如果你不想修改dedecms的话我们可以利用js来实例,代码如下:
 
代码如下:
 
<script src="/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var tags_a = $("#tags a");
tags_a.each(function(){
var x = 9;
var y = 0;
var rand = parseInt(Math.random() * (x - y + 1) + y);
$(this).addClass("tags"+rand);
});
})
</script>
 
css代码如下:
 
代码如下:
 
<style>
body,a{ font-size:13px;}
a{ color:#333333; text-decoration:none;}
.taglist{ width:250px;overflow:hidden;border:#dddddd solid 1px;}
.taglist .tit{ width:100%; height:24px; line-height:24px; background-color:#565662;}
.taglist .tit a{ padding-left:8px; color:#ffffff;}
#tags a{height:26px; line-height:26px;padding-right:6px;}
#tags .tags0{}
#tags .tags1{color:#C00; font-size:24px;}
#tags .tags2{color:#030; font-size:16px;}
#tags .tags3{color:#00F;}
#tags .tags4{ font-size:16px;}
#tags .tags5{color:#C00; font-size:20px;}
#tags .tags6{color:#F06 font-size:20px;}
#tags .tags7{color:#030; font-weight:bold; font-size:18px;}
#tags .tags8{color:#F06; font-weight:bold;}
#tags .tags9{color:#C00; font-weight:bold;font-size:16px;}
#tags a:hover{ color:#F00; text-decoration:underline;}
.w95{ width:95%; margin:0 auto; padding-top:6px; padding-bottom:6px;}
.taglist .w95{}
</style>
 
html结构:
 
代码如下:
 
<div class="taglist">
<div class="tit"><a href="#">TAG标签</a></div>
<div class="w95" id="tags">
 
这里面放你的A标题就可以了。
</div>
还有一个更简单的,代码如下:
 
代码如下:
 
<script language="javascript" type="text/javascript">
function randomKeywords(){
var alinks = document.getElementById("keywords").getElementsByTagName("a");
var aColors = new Array("#990033", "#006666", "#9966CC","#FFCC66", "#6633CC", "#9999CC","#999966", "#996666", "#9933CC","#FF99CC");
var aSize = new Array("11px", "12px", "13px","14px", "15px", "16px","17px");
for( var i=0; i<alinks.length; i++){
alinks[i].style.color=aColors[Math.round(aColors.length*Math.random())];
alinks[i].style.fontSize=aSize[Math.round(aSize.length*Math.random())];
}
}
randomKeywords();
</script>

关键词:Dedecms,实现,tags,云,标签,随机,颜色,与,字    标签:
    更多资讯请收藏关注 网站模板(www.1yc.cn)

dedecms后台管理搜索到文章正文内容的方法后台管理搜索到文章正文内容的方法,即我们说的全文搜索。在文章列表下面可... 2021-07-27
织梦导航部分去掉最后一个循环多出来的部分我们都知道dedecms中,当我们对导航循环的时候往往最后一项是多余的... 2021-07-22
dede编辑文章不更新时间的方法今天在修改本站文章的时候,发现织梦DEDECMS5.7这个版本存在一个... 2021-07-27
织梦的默认作者和默认来源如何修改首先直奔主题了,默认的未知和admin,很容易导致页面不美观,如果在返... 2021-07-27
dede自定义表单提交后的提示信息改弹窗提示并停留在当前页dede提示信息改弹窗提示并跳转后停留在当前页面的方法: 第一步:找到... 2021-08-14
如何在DEDECMS网站栏目中增加统计文章数的功能方法在我们在制作dedecms模板的时候,通常会为了让网站美观,要在栏目导... 2021-08-14
织梦 获取当前栏目ID以及调用当前栏目的字段获取dedecms当前栏目的ID,标签为: {dede:type}[f... 2021-08-14
织梦DedeCms获取文章缩略图的高度和宽度某些瀑布流的代码要求图片必须带有高度,而织梦默认的缩略图仅仅是储存的图... 2021-07-22
dedecms搜索结果页实现按频道模型显示不同结果模板的方法这篇文章主要为大家介绍了dedecms搜索结果页实现按频道模型显示不同... 2021-07-27
织梦后台转入成功登录信息的删除方法处女座站长朋友们,有一个很不好的习惯,不喜欢在php空间安装了dede... 2021-08-14
dedecms织梦模板去掉文档内链自动连接关键词的下划线方法一: 织梦有一个功能,可以实现文章内出现的关键词自动加链接,但是有... 2021-07-22
织梦DEDECMS模板中内容页分页数目太多时自动隐藏的方法在dede程序的文章或图集模型,内容页分页过多,假如分页80页,那么d... 2021-07-22
Dedecms5.7任意调整水印在图片的位置教程在使用DEDECMS过程中,本站发现,开启DEDECMS水印功能后,后... 2021-07-22
dede织梦列表中调用单个图集中图片的数量方法dede织梦列表中调用单个图集中图片的数量方法: 模板中的调用代码: ... 2021-07-27
DEDE织梦当前系统时间标签带时分:[field:pubdate function=GetDate... 2021-07-22
dedecms织梦 if 判断语句用法{dede:field.tong_gg php=yes} if(@me... 2021-07-27

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