本文實例講述了jQuery實現鼠標移到某個對象時彈出顯示層功能。分享給大家供大家參考，具體如下：
/*** 鼠標移上去顯示層* @param divId 顯示的層ID* @returns*/$.fn.myHoverTip = function(divId) { var div = $("#" + divId); //要浮動在這個元素旁邊的層 div.css("position", "absolute");//讓這個層可以絕對定位 var self = $(this); //當前對象 self.hover(function() { div.css("display", "block"); var p = self.position(); //獲取這個元素的left和top var x = p.left + self.width();//獲取這個浮動層的left var docWidth = $(document).width();//獲取網頁的寬 if (x > docWidth - div.width() - 20) { x = p.left - div.width(); } div.css("left", x); div.css("top", p.top); div.show(); }, function() { div.css("display", "none"); } ); return this;}在哪個對象旁邊顯示DIV，隨自己定義，只要定義一個ID即可：
如：
<a id="viewReInfo" href="#" rel="external nofollow" rel="external nofollow" >查看收件人回執情況</a>
需要顯示的DIV，根據需求自己定義，同樣只需定義ID即可：
如：
<div id="receiptInfo" class="receiptInfo">(www.survivalescaperooms.com 提示信息)</div>
調用上面的JS函數，代碼如下：
$('#viewReInfo').myHoverTip('receiptInfo');測試示例如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>www.survivalescaperooms.com jQuery彈出提示框</title><style>.receiptInfo{display:none;}</style></head><body><a id="viewReInfo" href="#" rel="external nofollow" rel="external nofollow" >查看收件人回執情況</a><div id="receiptInfo" class="receiptInfo">(www.survivalescaperooms.com 提示信息)</div><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script>/*** 鼠標移上去顯示層* @param divId 顯示的層ID* @returns*/$.fn.myHoverTip = function(divId) { var div = $("#" + divId); //要浮動在這個元素旁邊的層 div.css("position", "absolute");//讓這個層可以絕對定位 var self = $(this); //當前對象 self.hover(function() { div.css("display", "block"); var p = self.position(); //獲取這個元素的left和top var x = p.left + self.width();//獲取這個浮動層的left var docWidth = $(document).width();//獲取網頁的寬 if (x > docWidth - div.width() - 20) { x = p.left - div.width(); } div.css("left", x); div.css("top", p.top); div.show(); }, function() { div.css("display", "none"); } ); return this;}$('#viewReInfo').myHoverTip('receiptInfo');</script></body></html>
新聞熱點
疑難解答
圖片精選
