以下代码,实现一个标签云的效果。
只给出核心代码,供大家学习参考。
1,创建标签云的函数
 
复制代码 代码示例:
function createTagCloud($tags)  
{     
    //I pass through an array of tags  
    $i=0;  
    foreach($tags as $tag)  
    {  
        $id = $tag['id']; //the tag id, passed through  
        $name = $tag['tag']; //the tag name, also passed through in the array  
          
        //using the mysql count command to sum up the tutorials tagged with that id  
        $sql = "SELECT COUNT(*) AS totalnum FROM tutorials WHERE tags LIKE '%".$id."%' AND published = 1";  
          
        //create the resultset and return it  
        $res = mysql_query($sql);  
        $res = mysql_fetch_assoc($res);  
          
        //check there are results ;)  
        if($res)  
        {  
            //build an output array, with the tag-name and the number of results  
            $output[$i]['tag'] = $name;   
            $output[$i]['num'] = $res['totalnum'];  
        }  
          
        $i++;  
    }  
      
    /*this is just calling another function that does a similar SQL statement, but returns how many pieces of content I have*/  
    $total_tuts = $this->getNumberOfTutorials();  
      
    //ugh, XHTML in PHP?  Slap my hands - this isn't best practice, but I was obviously feeling lazy  
    $html = '<ul class="tagcloud">';  
      
    //iterate through each item in the $output array (created above)  
    foreach($output as $tag)  
    {  
        //get the number-of-tag-occurances as a percentage of the overall number  
        $ratio = (100 / $total_tuts) * $tag['num'];  
          
        //round the number to the nearest 10  
        $ratio =  round($ratio,-1);  
          
        /*append that classname onto the list-item, so if the result was 20%, it comes out as cloud-20*/  
        $html.= '<li class="cloud-'.$ratio.'"><a href="/tag/'.$tag['tag'].'">'.$tag['tag'].'</a></li>';           
    }  
      
    //close the UL  
    $html.= '</ul>';  
      
    return $html;   
} 
2,css代码部分
/*删除默认的列表样式,使之成为一个普通的清单列表*/  
 
复制代码 代码示例:
.home-item ul.tagcloud  
{  
    list-style-type:none;  
    margin:0px;  
    padding:0px;  
}  
  
/*设置li的样式*/  
.home-item ul.tagcloud li  
{  
    display:inline !important;  
    margin-right:15px;  
    line-height:2em;  
}  
  
.home-item ul.tagcloud li a  
{  
    display:inline;  
}  
  
/*标签云的效果*/  
.home-item ul.tagcloud li.cloud-10 a  
{  
    font-size:110%;  
}  
  
.home-item ul.tagcloud li.cloud-20 a  
{  
    font-size:120%;  
}  
  
.home-item ul.tagcloud li.cloud-30 a  
{  
    font-size:130%;  
}  
  
/*************************************  
you get the idea, i'm skipping a few  
*************************************/  
  
.home-item ul.tagcloud li.cloud-90 a  
{  
    font-size:190%;  
}  
  
.home-item ul.tagcloud li.cloud-100 a  
{  
    font-size:200%;  
}