jquery獲取點擊控件的絕對位置簡單實例
更新時間：2016年10月13日 09:25:34 投稿：jingxian
下面小編就為大家?guī)硪黄猨query獲取點擊控件的絕對位置簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
在使用jquery的過程中，想取得當前點擊input的絕對位置而去顯示一個div，jquery本身提供offset和position這個兩個方法，但position官方解釋是relative to the offset parent，可以看到是針對父結點的，而offset官方解釋relative to the document，貌似使用offset可以直接絕對定位。但是在網(wǎng)頁中如果出現(xiàn)嵌套div的情況，top和left會疊加，因此這個時候如果要定位顯示一個新的div就要把父親結點的offset去掉，jquery提供了offsetParent這個方法
因此，如下代碼可以在點擊一個控件后，在其下方顯示一個絕對定位的div
$('#id').click(function(event){
var curleft = $(event.target).offset().left;
var curtop = $(event.target).offset().top+$(event.target).outerHeight();
var obj = $(event.target);
obj = obj.offsetParent();
//獲取控件絕對位置
while(obj.attr('tagName').toLowerCase() != 'body'){
curleft =curleft- obj.offset().left;
curtop =curtop- obj.offset().top;
obj = obj.offsetParent();
}
$('#div').css('top',curtop+'px').css('left',curleft+'px');
});
以上就是小編為大家?guī)淼膉query獲取點擊控件的絕對位置簡單實例全部內(nèi)容了，希望大家多多支持腳本之家~
相關文章
利用JQuery和Servlet實現(xiàn)跨域提交請求示例分享
這篇文章主要介紹了利用JQuery和Servlet實現(xiàn)跨域提交請求示例,需要的朋友可以參考下2014-02-02
用戶管理的設計_jquery的ajax實現(xiàn)二級聯(lián)動效果
下面小編就為大家?guī)硪黄脩艄芾淼脑O計_jquery的ajax實現(xiàn)二級聯(lián)動效果。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
近日項目中要做一個鼠標拖拽層的效果，于是手動使用Jquery做了一個，發(fā)出來跟大伙兒分享一下，并希望能得到高手的指點,如何有高手改進的話，在下不勝感激2012-12-12
這篇文章主要為大家詳細介紹了jquery實現(xiàn)樓層滾動特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了jQuery中nextUntil()方法用法,實例分析了nextUntil()方法的功能、定義及匹配同輩元素的技巧與注意事項,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了JQuery.dataTables表格插件添加跳轉到指定頁的解決方案，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-06-06
jquery中利用navigator.userAgent.indexOf來判斷瀏覽器類型，并進行了一下處理，如果不想使用jquery，稍為修改下代碼就可以為自己所用2011-04-04
這篇文章主要介紹了jQuery制作簡單柱狀圖的方法,實例分析了html與css布局以及jQuery功能的具體實現(xiàn)方法,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細介紹了JQuery實現(xiàn)隱藏和顯示動畫效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
jQuery EasyUI API 中文文檔 - Dialog對話框
jQuery EasyUI API 中文文檔 - Dialog對話框使用說明，需要的朋友可以參考下。2011-11-11