jQuery實(shí)現(xiàn)鼠標(biāo)移到某個(gè)對(duì)象時(shí)彈出顯示層功能
本文實(shí)例講述了jQuery實(shí)現(xiàn)鼠標(biāo)移到某個(gè)對(duì)象時(shí)彈出顯示層功能。分享給大家供大家參考,具體如下:
/** * 鼠標(biāo)移上去顯示層 * @param divId 顯示的層ID * @returns */ $.fn.myHoverTip = function(divId) { var div = $("#" + divId); //要浮動(dòng)在這個(gè)元素旁邊的層 div.css("position", "absolute");//讓這個(gè)層可以絕對(duì)定位 var self = $(this); //當(dāng)前對(duì)象 self.hover(function() { div.css("display", "block"); var p = self.position(); //獲取這個(gè)元素的left和top var x = p.left + self.width();//獲取這個(gè)浮動(dòng)層的left var docWidth = $(document).width();//獲取網(wǎng)頁(yè)的寬 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; }
在哪個(gè)對(duì)象旁邊顯示DIV,隨自己定義,只要定義一個(gè)ID即可:
如:
<a id="viewReInfo" href="#" rel="external nofollow" rel="external nofollow" >查看收件人回執(zhí)情況</a>
需要顯示的DIV,根據(jù)需求自己定義,同樣只需定義ID即可:
如:
<div id="receiptInfo" class="receiptInfo">(www.dbjr.com.cn 提示信息)</div>
調(diào)用上面的JS函數(shù),代碼如下:
$('#viewReInfo').myHoverTip('receiptInfo');
測(cè)試示例如下:
<!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.dbjr.com.cn jQuery彈出提示框</title> <style> .receiptInfo{display:none;} </style> </head> <body> <a id="viewReInfo" href="#" rel="external nofollow" rel="external nofollow" >查看收件人回執(zhí)情況</a> <div id="receiptInfo" class="receiptInfo">(www.dbjr.com.cn 提示信息)</div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> /** * 鼠標(biāo)移上去顯示層 * @param divId 顯示的層ID * @returns */ $.fn.myHoverTip = function(divId) { var div = $("#" + divId); //要浮動(dòng)在這個(gè)元素旁邊的層 div.css("position", "absolute");//讓這個(gè)層可以絕對(duì)定位 var self = $(this); //當(dāng)前對(duì)象 self.hover(function() { div.css("display", "block"); var p = self.position(); //獲取這個(gè)元素的left和top var x = p.left + self.width();//獲取這個(gè)浮動(dòng)層的left var docWidth = $(document).width();//獲取網(wǎng)頁(yè)的寬 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>
PS:感興趣的朋友可以使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試一下運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《jQuery窗口操作技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jquery鼠標(biāo)放上去顯示懸浮層即彈出定位的div層
- Jquery利用mouseenter和mouseleave實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)彈出層且可以點(diǎn)擊
- Jquery中國(guó)地圖熱點(diǎn)效果-鼠標(biāo)經(jīng)過(guò)彈出提示層信息的簡(jiǎn)單實(shí)例
- jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊彈出漸變層的方法
- 使用jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)彈出更多相關(guān)信息層附源碼下載
- jQuery Dialog 彈出層對(duì)話(huà)框插件
- 基于jquery的模態(tài)div層彈出效果
- jquery實(shí)現(xiàn)居中彈出層代碼
- jQuery彈出層始終垂直居中相對(duì)于屏幕或當(dāng)前窗口
- jQuery拖動(dòng)div、移動(dòng)div、彈出層實(shí)現(xiàn)原理及示例
- JQuery彈出層示例可自定義
相關(guān)文章
jQuery實(shí)現(xiàn)的簡(jiǎn)單在線(xiàn)計(jì)算器功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單在線(xiàn)計(jì)算器功能,結(jié)合完整實(shí)例形式分析了jQuery實(shí)現(xiàn)簡(jiǎn)單四則運(yùn)算的相關(guān)操作技巧,需要的朋友可以參考下2017-05-05jQuery發(fā)送Ajax請(qǐng)求的幾種方法舉例
Ajax一個(gè)向后端發(fā)送請(qǐng)求的方式,下面這篇文章主要給大家介紹了關(guān)于jQuery發(fā)送Ajax請(qǐng)求的幾種方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用jQuery具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-06-06一個(gè)簡(jiǎn)單的jquery的多選下拉框(自寫(xiě))
想在網(wǎng)上找一個(gè)插件用用,可是,網(wǎng)上的插件看起來(lái)都比較雜亂,我參考了網(wǎng)上的一些插件,自己用jquery寫(xiě)了一個(gè)多選下拉框2014-05-05jquery canvas繪制圖片驗(yàn)證碼實(shí)例
這篇文章主要為大家詳細(xì)介紹了jquery canvas繪制圖片驗(yàn)證碼實(shí)例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10基于jquery實(shí)現(xiàn)的樹(shù)形菜單效果代碼
這篇文章主要介紹了基于jquery實(shí)現(xiàn)的樹(shù)形菜單效果代碼,實(shí)例分析了jquery基于鼠標(biāo)事件動(dòng)態(tài)改變頁(yè)面元素屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09Jquery實(shí)現(xiàn)移動(dòng)端控制DIV拖拽
這篇文章主要為大家詳細(xì)介紹了Jquery實(shí)現(xiàn)移動(dòng)端控制DIV拖拽,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02JQuery動(dòng)態(tài)生成的按鈕無(wú)法觸發(fā)問(wèn)題及完美解決方法
利用JQuery動(dòng)態(tài)添加的按鈕無(wú)法通過(guò)$(selector).click方法觸發(fā)點(diǎn)擊事件,下面小編給大家?guī)?lái)了JQuery動(dòng)態(tài)生成的按鈕無(wú)法觸發(fā)問(wèn)題與解決方法,需要的朋友可以參考下2023-02-02jQuery學(xué)習(xí)筆記之 Ajax操作篇(一) - 數(shù)據(jù)加載
Ajax 通俗來(lái)講即不需要刷新頁(yè)面即可從服務(wù)器或客戶(hù)端上加載數(shù)據(jù),當(dāng)然這些數(shù)據(jù)的格式是多種多樣的。2014-06-06jQuery插件HighCharts繪制的基本折線(xiàn)圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制的基本折線(xiàn)圖效果,結(jié)合實(shí)例形式分析了jQuery基于HighCharts插件繪制圖形的具體實(shí)現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03