4.5 实战：网页链接的提示

在项目的页面中经常会看到超级链接的影子。如果要让超级链接自带超级链接提示，那么只需要在超级链接标签里设置title属性就可以，具体语法如下：

<a href="#" title="超级链接提示信息">提示</a>

上述代码虽然可以实现提示效果，但是响应速度非常缓慢。为了实现良好的人机交互，需要手动实现提示效果。

        <body>
        <! --超级链接-->
        <p><a href="#" class="tooltip" title="超链接提示1">提示1.</a></p>
        <p><a href="#" class="tooltip" title="超链接提示2">提示2.</a></p>
        </body>

设置关于超级链接的类样式tooltip。修改超级链接的相关样式，具体代码如下：

        #tooltip{
         position:absolute;
         border:1px solid #333;
         background:#f7f5d1;
         padding:1px;
         color:#333;
         display:none;
        }

编写jQuery代码，实现超级链接提示功能，具体代码如下：

        01    $(function(){
        02         var x = 10;
        03         var y = 20;
        04         $("a.tooltip").mouseover(function(e){
        05               this.myTitle = this.title;
        06               this.title = "";
        07               var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>";
                                                          //创建div元素
        08             $("body").append(tooltip);           //把它追加到文档中
        09               $("#tooltip")
        10                    .css({
        11                          "top": (e.pageY+y) + "px",
        12                          "left": (e.pageX+x)  + "px"
        13                 }).show("fast");                   //设置x坐标和y坐标，并且显示
        14         }).mouseout(function(){
        15               this.title = this.myTitle;
        16             $("#tooltip").remove();               //移除
        17         }).mousemove(function(e){
        18               $("#tooltip")
        19                    .css({
        20                          "top": (e.pageY+y) + "px",
        21                          "left": (e.pageX+x)  + "px"
        22                    });
        23         });
        24    })

在上述代码中，第4～13行设置鼠标滑入超级链接时的处理方法，其中第7行创建一个包含title属性值的提示框（<div>标签元素对象），第8行将所创建的提示框对象追加到文档中，剩下的代码主要用来设置x和y坐标，使得提示框显示在鼠标位置的旁边。第14～16行设置鼠标滑出超级链接时的处理方法，主要是移除提示框。第17～23行设置鼠标在超级链接上移动时的处理方法，即通过css()方法设置提示效果的坐标，以达到提示跟随鼠标一起移动的效果。

在浏览器中运行页面，效果如图4.9所示。当鼠标滑入超级链接时，快速出现提示，效果如图4.10所示；当鼠标滑出超级链接时，提示效果消失。

图4.9 浏览页面

图4.10 鼠标滑入时的效果

上一章目录下一章