phpとcssのタグクラウド効果

WBOY
リリース: 2016-07-25 08:56:46
オリジナル
922 人が閲覧しました
  1. function createTagCloud($tags)
  2. {
  3. //タグの配列を通過します
  4. $i=0;
  5. foreach($tags as $tag)
  6. {
  7. $id = $tag['id']; //
  8. を介して渡されるタグ ID $name = $tag['tag']; //タグ名も配列で渡されます
  9. //mysql count コマンドを使用して、その ID でタグ付けされたチュートリアルを合計します
  10. $sql = "SELECT COUNT(*) AS totalnum FROMtutorials WHERE tags LIKE '%" .$id."%' AND 公開 = 1";
  11. //結果セットを作成して返します
  12. $res = mysql_query($sql);
  13. $res = mysql_fetch_assoc($res);
  14. //結果があることを確認します ;)
  15. if($res)
  16. {
  17. //タグ名と結果の数を使用して出力配列を構築します
  18. $output[$i]['tag'] = $名前;
  19. $output[$i]['num'] = $res['totalnum'];
  20. }
  21. $i++;
  22. }
  23. /*これは同様の SQL ステートメントを実行する別の関数を呼び出しているだけですが、所有しているコンテンツの数を返します*/
  24. $total_tuts = $this->getNumberOfTutorials();
  25. //うーん、PHP の XHTML? 手をたたく – これはベストプラクティスではありませんが、明らかに怠けていると感じていました
  26. $html = '
      ';
    • // $output 配列 (上で作成した) の各項目を反復処理します
    • foreach($output as $tag)
    • {
    • // タグの出現数を全体の数のパーセンテージとして取得します
    • $ratio = (100 / $total_tuts) * $tag['num'];
    • //数値を最も近い 10 に四捨五入します
    • $ratio =round($ratio,-1);
    • /*そのクラス名を list-item に追加するので、結果が 20% だった場合、cloud-20*/
    • $html.= '
    • '.$tag['tag'].'
    • ';
    • }
    • //UL を閉じる
    • $html.= '
    ';
  27. $html を返す;
  28. }
复制代码

2、css代码部分 /*删除許可の列表式、使用するのは普通のきれいな列表*/

  1. .home-item ul.tagcloud
  2. {
  3. list-style-type:none;
  4. マージン:0px;
  5. パディング:0px;
  6. }
  7. /*设置liの样式*/
  8. .home-item ul.tagcloud li
  9. {
  10. display:inline ! important;
  11. マージン右:15px;
  12. 行の高さ:2em;
  13. }
  14. .home-item ul.tagcloud li a
  15. {
  16. display:inline;
  17. }
  18. /*标签云的效果*/
  19. .home-item ul.tagcloud li.cloud-10 a
  20. {
  21. font-size:110%;
  22. }
  23. .home-item ul.tagcloud li.cloud-20 a
  24. {
  25. font-size:120%;
  26. }
  27. .home-item ul.tagcloud li.cloud-30 a
  28. {
  29. font-size:130%;
  30. }
  31. /**************************************
  32. おわかりでしょう、いくつか省略しています
  33. ** **********************************/
  34. .home-item ul.tagcloud li.cloud-90 a
  35. {
  36. font-size:190%;
  37. }
  38. .home-item ul.tagcloud li.cloud-100 a
  39. {
  40. font-size:200%;
  41. }
复制代


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート