dedecms文章权重排序(Dedecms实现tags云标签随机颜色与字体大小方法详解)
类别:CMS系统 浏览量:513
时间:2022-01-25 00:19:57 dedecms文章权重排序
Dedecms实现tags云标签随机颜色与字体大小方法详解本文实例讲述了Dedecms实现tags云标签随机颜色与字体大小方法。分享给大家供大家参考。具体分析如下:
这里给大家介绍三种tags云标签随机颜色与字体大小方法,包括直接在dedecms中进行二次开发,另一种利用jquery与js来获取指定li中的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结构:
- <li class="taglist">
- <li class="tit"><a href="#">TAG标签</a></li>
- <li class="w95" id="tags">
- 这里面放你的A标题就可以了。
- </li>
还有一个更简单的,代码如下:
- <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建站有所帮助。
您可能感兴趣
- dedecms频道封面不能修改内容(DEDECMS内容页分页过多、过长问题最佳解决方案)
- dedecms操作手册(织梦DEDECMS结构化数据Meta申明标签)
- dedecms参数不显示(织梦DedeCms中出现Safe Alert: Request Error step 1/2 的解决方法)
- dedecms列表样式修改(dedecms5.7sp1评论添加字段的实现方法)
- dedecms缩略图插件(织梦DEDECMS有缩略图显示,没有显示随机指定图片的实现方法)
- dedecms安装与配置详解(LuManager服务器管理软件安装DEDECMS软件图文教程)
- dedecms调用点击数(织梦DEDECMS中显示复制地址,推荐给QQ/MSN上的好友的代码)
- dedecms运行环境(织梦dedecms5.7生成首页提示404错误解决办法)
- dedecms标签怎么调用(Dedecms自定义表单“数据校验不对,程序返回错误”的解决方法)
- 织梦dedecms教程(详解各种dedeCMS织梦后台登陆验证码错误或不显示解决方法大全)
- 织梦dedecms加固版需要付费吗(织梦dedecms系统后台安全提示去除方法)
- dedecms提示信息(DedeCms fckeditor编辑器空白无法显示的相关问题)
- dedecms修改教程(还原dedecms数据后系统基本参数空白的解决方法)
- dede模板栏目调用(织梦DEDECMS5.7栏目列表页分页URL优化列表页重复的解决方案)
- dedecms单页面栏目(DEDECMS 获取当前栏目及所有子栏目的文章数量)
- dedecms在哪添加产品目录(dedecms的sql标签中传入参数的方法)
- 省委书记出席的交流会,十位县委书记同场发言,代表公文材料的高水平(省委书记出席的交流会)
- 《刘老根3》热播,去世15年的她却再次被 伤害(去世15年的她却再次被)
- 十二星座爱情支配欲指数(十二星座爱情支配欲指数)
- 虐待儿童是发泄支配欲的愚蠢行为(虐待儿童是发泄支配欲的愚蠢行为)
- 你或许不知道你隐藏的支配欲望(你或许不知道你隐藏的支配欲望)
- 把宽体丰田86卖了,换成7.5代高尔夫GTI玩起姿态与性能并存的改装(把宽体丰田86卖了)
热门推荐
- 阿里云ubuntu系统(阿里云ubuntu16.04如何搭建pptpd服务)
- docker进入容器的方法(在docker容器中安装vi命令的简单操作)
- vueweb端聊天(Vue实现聊天界面)
- 一个网站服务器有多大(主流网站服务器配置有哪些组成 主流网站服务器多少钱)
- linux怎么搭建nfs(通过案例深入解析linux NFS机制)
- windows7mysql服务无法启动(Windows系统下MySQL无法启动的万能解决方法)
- laravel 权限管理(修改Laravel自带的认证系统的User类的命名空间的步骤)
- mysql和navicat怎么用(如何用Navicat操作MySQL)
- docker部署go项目(Gogs+Jenkins+Docker 自动化部署.NetCore的方法步骤)
- 内网nginx配置https详解(Nginx如何配置Http、Https、WS、WSS的方法步骤)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9