masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > pembangunan bahagian belakang > tutorial php > php与css 标签云效果

php与css 标签云效果

WBOY
Lepaskan： 2016-07-25 08:56:46
asal
958 orang telah melayarinya
  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. }
复制代码


Label berkaitan：
php与css 标签云效果
sumber：php.cn
Artikel sebelumnya：php写excel文件的实现代码 Artikel seterusnya：php image图像函数集
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2245
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2385
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1994
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1881
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1950
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan