Dedecms实现tags云标签随机颜色与字体大小方法详解
本文实例讲述了Dedecms实现tags云标签随机颜色与字体大小方法。分享给大家供大家参考。具体分析如下:
这里给大家介绍三种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建站有所帮助。
(资源库 www.zyku.net)
上一篇:Dedecms频道,列表页,内容页中调用全站最新文章的方法
栏 目:DedeCMS
本文标题:Dedecms实现tags云标签随机颜色与字体大小方法详解
本文地址:https://www.zyku.net/dedecms/466.html
您可能感兴趣的文章
- 04-05帝国CMS tag伪静态后列表页分页样式修改方法
- 03-24html中ol标签不显示序号的解决办法
- 03-19帝国CMS模板灵动标签调用同级栏目导航,带当前栏目高亮
- 03-15帝国CMS灵动标签在内容页调用当前栏目多篇文章并且排
- 03-13帝国CMS灵动标签调用日期时间
- 03-13CSS去除标签em的斜体
- 03-13帝国SEO优化结合项标题title标签设置
- 03-12帝国CMS灵动标签调用相关文章
- 03-12帝国CMS万能标签调用随机文章的方法
- 11-02帝国CMS灵动标签调用字段大全
- 01-11星云视控-星云视控应用软件功能介绍
- 01-11时雨天气-时雨天气应用软件功能介绍
- 03-20一加9r关闭锁屏通知内容教程
- 10-15华为freelace pro怎样配对手机
- 10-07微信聊天记录保存为文档方法分享
- 12-25小米手机如何启用悬浮球
- 10-19iphone13pro面容解锁怎么设置
- 10-29微信如何关闭小米电视会员自动续费
- 01-12ip摄像头app-ip摄像头app应用软件功能
- 04-09小米11Pro开启超级省电模式方法
最近更新
阅读排行
猜你喜欢
- 04-21黑鲨4恢复出厂设置方法
- 03-02oppok9设置导航方式教程
- 11-10三星s21怎么投屏
- 03-31华为nova5i语音助手唤醒教程
- 09-14华为音乐取消免密支付方法介绍
- 12-26桃多多招聘-桃多多招聘应用软件功能介
- 09-18vivox70pro怎样设置手机投屏
- 04-27荣耀60se设置返回键教程
- 12-28迅车通-迅车通应用软件功能介绍
- 01-11众弈国象-众弈国象应用软件功能介绍