php與css 標籤雲效果

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 = ' '; //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.= ' '.$tag['tag'].' '; } //close the UL $html.= ' '; 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%; } 複製代碼

