Community Learn Tools Library Leisure
search
English
Home > Backend Development > PHP Tutorial > php and css tag cloud effect

php and css tag cloud effect

WBOY
Release： 2016-07-25 08:56:46
Original
954 people have browsed it
  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. }
复制代码


Related labels：
php与css 标签云效果
source：php.cn
Previous article：Implementation code for writing excel files in php Next article：php image image function set
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
3
2224
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2369
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
1978
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1864
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1936
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template