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建站有所帮助。

查看更多关于Dedecms实现tags云标签随机颜色与字体大小方法详解的详细内容...