锦溪有赌博捕鱼机吗

書名： 15天學會jQuery編程與實戰(zhàn)（視頻教學版）（Web前端技術叢書）
作者名：劉鑫
本章字數： 587字
更新時間： 2020-11-28 16:21:49

4.5 實戰(zhàn)：網頁鏈接的提示

在項目的頁面中經常會看到超級鏈接的影子。如果要讓超級鏈接自帶超級鏈接提示，那么只需要在超級鏈接標簽里設置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>";
                                                          //創(chuàng)建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行創(chuàng)建一個包含title屬性值的提示框（<div>標簽元素對象），第8行將所創(chuàng)建的提示框對象追加到文檔中，剩下的代碼主要用來設置x和y坐標，使得提示框顯示在鼠標位置的旁邊。第14～16行設置鼠標滑出超級鏈接時的處理方法，主要是移除提示框。第17～23行設置鼠標在超級鏈接上移動時的處理方法，即通過css()方法設置提示效果的坐標，以達到提示跟隨鼠標一起移動的效果。

在瀏覽器中運行頁面，效果如圖4.9所示。當鼠標滑入超級鏈接時，快速出現提示，效果如圖4.10所示；當鼠標滑出超級鏈接時，提示效果消失。

圖4.9 瀏覽頁面

圖4.10 鼠標滑入時的效果

官术网_书友最值得收藏!

15天學會jQuery編程與實戰(zhàn)（視頻教學版） （Web前端技術叢書）

4.5 實戰(zhàn)：網頁鏈接的提示

15天學會jQuery編程與實戰(zhàn)（視頻教學版）（Web前端技術叢書）