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