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