滑鼠懸浮於鏈接之上出現文字說明效果:對於超鏈接標簽，有一個title屬性，當滑鼠表懸浮於鏈接之上時候，就會顯示title的屬性值，雖然在一定程度上滿足了我們的需要，但是美觀度卻似差強人意，同時無法修改它的樣式，下麵就來介紹一下如何利用jquery模擬實現此功能。代碼如下:螞蟻部落 螞蟻部落 ...
滑鼠懸浮於鏈接之上出現文字說明效果:
對於超鏈接<a>標簽，有一個title屬性，當滑鼠表懸浮於鏈接之上時候，就會顯示title的屬性值，雖然在一定程度上滿足了我們的需要，但是美觀度卻似差強人意，同時無法修改它的樣式，下麵就來介紹一下如何利用jquery模擬實現此功能。
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ var x = 7; var y = 8; $("a.tip").hover(function(){ var title=this.title; var $div=$("<div id='newTip'>"+title+"</div>"); $(this).append($div); $(this).css({"position":"relative"}); $div.css({"position":"absolute","background":"pink"}); $div.css({"width":"120px","height":"30px"}); },function(){ $("#newTip").remove(); }).mousemove(function(e){ var $div = $("#newTip").css({"left":(e.pageX+x)+'px',"top":(e.pageY+y)+'px'}); }); }) </script> </head> <body> <a href="#" class="tip" title="螞蟻部落歡迎您">螞蟻部落</a> </body> </html>
以上代碼當滑鼠懸浮於鏈接之上的時候，能夠出現文字說明並且能夠跟隨滑鼠移動，下麵介紹一下它的實現過程。
一.代碼註釋:
1.$(function(){))，當穩當結構完全載入完畢再去執行函數中的代碼。
2.var x = 7，var y = 8，聲明兩個變數用來定義滑鼠指針和彈出的層的橫向和縱向距離。
3.$("a.tip").hover(function(){ },function(){})，為指定的鏈接添加滑鼠懸浮和滑鼠離開時要執行的函數。
4.var title=this.title，將當前鏈接的title屬性值賦值給變數title。
5.var $div=$("<div id='newTip'>"+title+"</div>")，創建一個jquery對象，其實就是div中放入title屬性值，這個也就是要彈出的層。
6.$(this).append($div)，將創建的div添加到當前鏈接<a>中。
7.$(this).css({"position":"relative"})，將超鏈接a設置為相對定位，因為彈出層是絕對定位，那麼定位參考對象就可以是鏈接a了。
8. $div.css({"position":"absolute","background":"pink"})，將div的設置為絕對定位，背景顏色為粉色。
9.$div.css({"width":"120px","height":"30px"})，設置div的尺寸。
10.$("#newTip").remove()，刪除指定id的元素，這裡就是刪除彈出的div。
11.mousemove(function(e){})，註冊mousemove事件處理函數，當然這裡採用的是鏈式調用。
12.var $div = $("#newTip").css({"left": (e.pageX+x)+'px',"top": (e.pageY+y)+'px'})，設置彈出div的left和top屬性值，實現跟隨效果。
二.相關閱讀:
1.hover()可以參閱jQuery的hover事件一章節。
2.this可以參閱javascript的this用法詳解一章節。
3.append()函數可以參閱jQuery的append()方法一章節。
4.css()函數可以參閱jQuery的css()方法一章節。
5.remove()函數jQuery的remove()方法一章節。
6.mousemove事件可以參閱jQuery的mousemove事件一章節。
7.e.pageX可以參閱jQuery的event.pageX屬性一章節。
8.相對定位可以參閱CSS的相對定位一章節。
9.絕對定位可以參閱CSS的絕對定位一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11405
更多內容可以參閱:http://www.softwhy.com/jquery/
