jquery獲取點擊控件的絕對位置簡單實例
更新時間：2016年10月13日 09:25:34 投稿：jingxian
下面小編就為大家?guī)硪黄猨query獲取點擊控件的絕對位置簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
在使用jquery的過程中，想取得當前點擊input的絕對位置而去顯示一個div，jquery本身提供offset和position這個兩個方法，但position官方解釋是relative to the offset parent，可以看到是針對父結(jié)點的，而offset官方解釋relative to the document，貌似使用offset可以直接絕對定位。但是在網(wǎng)頁中如果出現(xiàn)嵌套div的情況，top和left會疊加，因此這個時候如果要定位顯示一個新的div就要把父親結(jié)點的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)容了，希望大家多多支持腳本之家~
相關(guān)文章
這篇文章主要介紹了jQuery Easyui一些用法，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-08-08
JQEasy-ui在IE9以下版本中二次加載的問題分析及處理方法
之前項目中才用了Easy-ui，但是在同時使用tree和grid的效果時，因為頁面有倆個URL,分別為Ajax樹去后臺取數(shù)據(jù)和Grid取數(shù)據(jù)，在IE9以上以及其他瀏覽器里都沒有問題，在Ie低版本時會出現(xiàn)先加載表格，然后一閃而過加載樹渲染頁面，造成頁面只有tree數(shù)據(jù)而沒有表格grid數(shù)據(jù)。2014-06-06
用戶登錄是許多網(wǎng)站必備的功能。有一種方式就是不管在網(wǎng)站的哪個頁面，點擊登錄按鈕就會彈出一個遮罩層，顯示用戶登錄的對話框。本文將推薦一個帶二維碼的登錄彈出層，可拖動、關(guān)閉，有需要的朋友可以參考一下。2016-12-12
JQuery居然沒有操作cookie相關(guān)的函數(shù)，搜了下官方有個cookie的插件。2010-04-04
jQuery插件實現(xiàn)表格隔行換色且感應鼠標高亮行變色
實現(xiàn)表格隔行換色，且感應鼠標行變色的方法有很多，在本文將為大家介紹的是使用jQuery插件來實現(xiàn)，具體如下，感興趣的朋友可以練練手2013-09-09
jQuery+Cookie實現(xiàn)切換皮膚功能【附源碼下載】
這篇文章主要介紹了jQuery+Cookie實現(xiàn)切換皮膚功能,結(jié)合完整實例形式分析了jQuery結(jié)合cookie動態(tài)變換頁面元素樣式的相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2018-03-03
詳談jQuery Ajax(load,post,get,ajax)的用法
下面小編就為大家?guī)硪黄斦刯Query Ajax(load,post,get,ajax)的用法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要為大家詳細介紹了jquery插件實現(xiàn)掃雷游戲第二篇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
jquery制作的彈窗提示窗口插件，包含多種模式。帶有回執(zhí)函數(shù)值的功能,需要的朋友可以參考下2014-03-03
jQuery實現(xiàn)的購物車物品數(shù)量加減功能代碼
這篇文章主要介紹了jQuery實現(xiàn)的購物車物品數(shù)量加減功能,涉及jQuery針對鼠標事件的響應及頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-11-11