javascript与dom编程（四）animation（例）Tooltips

 图示：

HTML：

     <p><a class="federation"
            title="hello sunfishlu, How are you?."
            href="http://en.wikipedia.org/wiki/James_T._Kirk">sunfishlu</a>
        (2233 - 2293/2371), played by William Shatner, is the leading character in the
        original Star Trek TV series and the films based on it. Captain Kirk commanded
        the starship <span class="ship">Enterprise</span>
        (<a class="federation"
            title="Read more about the USS Enterprise (NCC-1701) at Wikipedia, the free encyclopedia."
            href="http://en.wikipedia.org/wiki/USS_Enterprise_%28NCC-1701%29">NCC-1701</a>
        and later
        <a class="federation"
            title="Read more about the USS Enterprise (NCC-1701-A) at Wikipedia, the free encyclopedia."
            href="http://en.wikipedia.org/wiki/USS_Enterprise_%28NCC-1701-A%29">NCC-1701-A</a>).</p>

 

每个<a></a>都含有title属性，当鼠标处于<a>上时，我们就会触发事件，产生tooltips。

JavaScript：

var Tooltips =
{
  init: function()
  {
    var links = document.getElementsByTagName("a");//获得一个A数组
    
    for (var i = 0; i < links.length; i++)
    {    
      var title = links[i].getAttribute("title");//获得title属性的value
      //如果title存在
      if (title && title.length > 0)
      {
        Core.addEventListener(links[i], "mouseover", Tooltips.showTipListener);
        Core.addEventListener(links[i], "focus", Tooltips.showTipListener);
        Core.addEventListener(links[i], "mouseout", Tooltips.hideTipListener);
        Core.addEventListener(links[i], "blur", Tooltips.hideTipListener);
      }
    }
  },
/**//*
 * 为了产生tooltips，我们需要创建html内容，一般有两种方式
 * 1：通过dom的API
 * 2：通过不标准的innerHTML属性
 */
  showTip: function(link)
  {
    Tooltips.hideTip(link);

    var tip = document.createElement("span");
    tip.className = "tooltip";
    var tipText = document.createTextNode(link.getAttribute("title"));
    tip.appendChild(tipText);//把tooltips的文本放在span中
    link.appendChild(tip);
    //<span class="tooltip">tipText</span>
    link._tooltip = tip;
    link.title = "";

    // Fix for Safari2/Opera9 repaint issue
    //relative:对象不可层叠，但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置
    document.documentElement.style.position = "relative";
  },
  
  hideTip: function(link)
  {
    if (link._tooltip)
    {
      link.title = link._tooltip.childNodes[0].nodeValue;      
      link.removeChild(link._tooltip);
      link._tooltip = null;

      // Fix for Safari2/Opera9 repaint issue
      document.documentElement.style.position = "static";
    }
  },

  showTipListener: function(event)
  {
    var link = this;
    this._timer = setTimeout(function()
        {
          Tooltips.showTip(link);
        }, 500);
    Core.preventDefault(event);
  },
  
  hideTipListener: function(event)
  {
    clearTimeout(this._timer);
    Tooltips.hideTip(this);
  }
};

Core.start(Tooltips);