首页 > Web开发 > 详细

jquery获取点击控件的绝对位置简单实例

时间:2017-02-02 17:30:33      阅读:282      评论:0      收藏:0      [点我收藏+]

在使用jquery的过程中,想取得当前点击input的绝对位置而去显示一个div,jquery本身提供offset和position这个两个方法,但position官方解释是relative to the offset parent,可以看到是针对父结点的,而offset官方解释relative to the document,貌似使用offset可以直接绝对定位。但是在网页中如果出现嵌套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‘);
});

jquery获取点击控件的绝对位置简单实例

原文:http://www.cnblogs.com/sjqq/p/6361334.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!