基于Hovertips的标签云

标签云，亦即标签汇集，它能够让用户很清晰的了解到一个网站内容的话题侧重点和优势。虽然在通常情况下，我们无法设计他们的内容，但是我们仍可以通过很多方式来充分表现这些标签的效果，让网站标签一目了然。

 

本文将介绍一种利用jQuery来表现标签云的效果，我们称之为“浮动子标签云”。意思就是，当用户将鼠标焦点放置在某个标签上时，会弹出一个浮动子标签，里面汇集了当前标签的子分类标签。

让我们来看看代码：

 

<script type="text/javascript" src="jquery-1.js"></script>
<script type="text/javascript" src="hovertip.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    window.setTimeout(hovertipInit, 1);
  });
</script>
<style type="text/css" media="all">@import "css.css";</style>

<div id="cloud">
  <ul class="nav">
    <li>
      <a class="size1" href="#" id="j1">adobe</a>
      <ul style="display: block;" class="hovertip" target="j1">
        <li><a class="size-sub1" href="#">Photoshop</a></li>
        <li><a class="size-sub2" href="#">Illustrator</a></li>
        <li><a class="size-sub3" href="#">Dreamweaver</a></li>
        <li><a class="size-sub4" href="#">Fireworks</a></li>
      </ul>
    </li>
    <li>
      <a class="size2" href="#" id="j2">Showcases</a></li>
    <li>
      <a class="size3" href="#" id="j3">Arts</a>
      <ul style="display: block;" class="hovertip" target="j3" >
        <li><a class="size-sub1" href="#">Arts1</a></li>
        <li><a class="size-sub2" href="#">Arts2</a></li>
        <li><a class="size-sub3" href="#">Arts3</a></li>
        <li><a class="size-sub4" href="#">Arts4</a></li>
        <li><a class="size-sub2" href="#">Arts5</a></li>
      </ul>
    </li>
    <li>
      <a class="size4" href="#" id="j4">Better Design</a>
      <ul style="display: block;" class="hovertip" target="j4" >
        <li><a class="size-sub1" href="#">Design1</a></li>
        <li><a class="size-sub2" href="#">Design2</a></li>
        <li><a class="size-sub3" href="#">Design3</a></li>
        <li><a class="size-sub4" href="#">Design4</a></li>
      </ul>
    </li>
    <li><a class="size5" href="#">Blogging</a></li>
    <li><a class="size1" href="#" id="j5">Ajax</a>
      <ul style="display: block;" class="hovertip" target="j5" >
        <li><a class="size-sub1" href="#">Jquery</a></li>
        <li><a class="size-sub2" href="#">Script.aculo.us</a></li>
        <li><a class="size-sub3" href="#">Mootools</a></li>
        <li><a class="size-sub4" href="#">Dojo</a></li>
        <li><a class="size-sub2" href="#">Prototype</a></li>
      </ul>
    </li>
    <li><a class="size6" href="#">Books</a></li>
    <li>
      <a class="size1" href="#" id="j6">Javascript</a>
      <ul style="display: block;" class="hovertip" target="j6" >
        <li><a class="size-sub1" href="#">Javascript1</a></li>
        <li><a class="size-sub2" href="#">Javascript2</a></li>
        <li><a class="size-sub3" href="#">Javascript3</a></li>
        <li><a class="size-sub4" href="#">Javascript4</a></li>

      </ul>
    </li>
    <li><a class="size2" href="#">Arts</a></li>
    <li><a class="size4" href="#">Freelance</a></li>
    <li>
      <a class="size3" href="#" id="j7">Animation</a>
      <ul style="display: block;" class="hovertip" target="j7" >
        <li><a class="size-sub1" href="#">Animation1</a></li>
        <li><a class="size-sub2" href="#">Animation2</a></li>
        <li><a class="size-sub3" href="#">Animation3</a></li>
        <li><a class="size-sub4" href="#">Animation4</a></li>
      </ul>
    </li>
    <li><a class="size6" href="#">Tutorials</a></li>
    <li><a class="size5" href="#">Cool Links</a></li>
  </ul>
</div>

 

效果如下：

 

 

详见附件。