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  .tags 0 {}  #tags  .tags 1 { color : #C00 ;  font-size : 24px ;}  #tags  .tags 2 { color : #030 ;  font-size : 16px ;}  #tags  .tags 3 { color : #00F ;}  #tags  .tags 4 {  font-size : 16px ;}  #tags  .tags 5 { color : #C00 ;  font-size : 20px ;}  #tags  .tags 6 { color : #F06   font-size : 20px ;}  #tags  .tags 7 { color : #030 ;  font-weight : bold ;  font-size : 18px ;}  #tags  .tags 8 { color : #F06 ;  font-weight : bold ;}  #tags  .tags 9 { color : #C00 ;  font-weight : bold ; font-size : 16px ;}  #tags  a:hover{  color : #F00 ;  text-decoration : underline ;}  .w 95 {  width : 95% ;  margin : 0   auto ;  padding-top : 6px ;  padding-bottom : 6px ;}  .taglist .w 95 {}  </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云标签随机颜色与字体大小方法总结的详细内容...