社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > 後端開發 > php教程 > php與css 標籤雲效果

php與css 標籤雲效果

WBOY
發布： 2016-07-25 08:56:46
原創
967 人瀏覽過
  2. function createTagCloud($tags)
  3. {
  4. //I pass through an array of tags
  5. $i=0;
  6. foreach($tags as $tag)
  7. {
  8. $id = $tag['id']; //the tag id, passed through
  9. $name = $tag['tag']; //the tag name, also passed through in the array
  11. //using the mysql count command to sum up the tutorials tagged with that id
  12. $sql = "SELECT COUNT(*) AS totalnum FROM tutorials WHERE tags LIKE '%".$id."%' AND published = 1";
  14. //create the resultset and return it
  15. $res = mysql_query($sql);
  16. $res = mysql_fetch_assoc($res);
  18. //check there are results ;)
  19. if($res)
  20. {
  21. //build an output array, with the tag-name and the number of results
  22. $output[$i]['tag'] = $name;
  23. $output[$i]['num'] = $res['totalnum'];
  24. }
  26. $i++;
  27. }
  29. /*this is just calling another function that does a similar SQL statement, but returns how many pieces of content I have*/
  30. $total_tuts = $this->getNumberOfTutorials();
  32. //ugh, XHTML in PHP? Slap my hands - this isn't best practice, but I was obviously feeling lazy
  33. $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.= '
    ';
  35. return $html;
  36. }
复制代码

2，css代码部分 /*删除默认的列表样式，使之成为一个普通的清单列表*/

  2. .home-item ul.tagcloud
  3. {
  4. list-style-type:none;
  5. margin:0px;
  6. padding:0px;
  7. }
  9. /*设置li的样式*/
  10. .home-item ul.tagcloud li
  11. {
  12. display:inline !important;
  13. margin-right:15px;
  14. line-height:2em;
  15. }
  17. .home-item ul.tagcloud li a
  18. {
  19. display:inline;
  20. }
  22. /*标签云的效果*/
  23. .home-item ul.tagcloud li.cloud-10 a
  24. {
  25. font-size:110%;
  26. }
  28. .home-item ul.tagcloud li.cloud-20 a
  29. {
  30. font-size:120%;
  31. }
  33. .home-item ul.tagcloud li.cloud-30 a
  34. {
  35. font-size:130%;
  36. }
  38. /*************************************
  39. you get the idea, i'm skipping a few
  40. *************************************/
  42. .home-item ul.tagcloud li.cloud-90 a
  43. {
  44. font-size:190%;
  45. }
  47. .home-item ul.tagcloud li.cloud-100 a
  48. {
  49. font-size:200%;
  50. }
复制代码


相關標籤：
php与css 标签云效果
來源：php.cn
上一篇：php寫excel檔案的實作程式碼 下一篇：php image影像函數集
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
function_exists()無法判定自訂函數 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
來自於 2024-04-29 11:01:01
0
3
2277
google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？
來自於 2024-04-23 00:22:19
0
11
2411
子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應
來自於 2024-04-19 15:37:47
0
1
2027
父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...
來自於 2024-04-18 23:52:34
0
1
1915
關於CSS心智圖的課件在哪？ 課件
來自於 2024-04-16 10:10:18
0
0
1981
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板