关闭

offsetTop和offset().top

2051人阅读 评论(0) 收藏 举报
分类:

前段时间写了一个视觉差滚动的demo,是用js实现的。

第二次看这个例子,我想封装一个jquery插件。

首先demo中有两个button需要在jq中对它们进行定位,然而问题来了


我先得到第一张图片的位置,对图片中的button的top进行定位时,想法是将css样式中的top设置成this.img.offset().top + this.img.height() / 2 - this.prev.height() / 2 + 'px',然而却出现了上图的效果,button跑到了下方。将this.img.offset().top改为this.img.position().top依然无法出现我想要的效果 ,什么原因呢?

在用js实现时,也是采用的这种思想,用的是img.offsetTop + img.clientHeight/2 - prev.clientHeight/2 + 'px',这个是正常显示的。

于是在例子中我打印出来this.img.offset().top 和 img.offsetTop和this.img.position().top 的值,分别是185,35,0,这个 是什么原因呢?

经过测试,offset()得到的结果永远是相对于文档的偏移值,它会忽略元素所有的父元素;

查了一下资料,其中position()属性是获取它最近的具有相对位置(position:relative)的父级元素的距离,如果找不到这样的元素,则返回相对于浏览器的距离。可是,这样得出的0值不符合我的预期,在html结构中,离img最近的relative元素是.wrap元素(请参见另一篇文章http://blog.csdn.net/u013742084/article/details/51339213),想象中应该是35才对,这一次是怎么也想不通了。。。。待后续补充。。。

offsetTop获取它最近的具有相对位置(position:relative)的父级元素的距离,如果找不到这样的元素,则返回相对于浏览器的距离。这是一个相当纠结的属性;

我做了一个测试。

 <h1 style="text-align: center;background-color: #222;">这是一个大大的标题</h1>
    <div id="container">
        <div class="panel" id="panel1"></div>
        <div class="panel" id="panel2"></div>
        <div class="panel" id="panel3"></div>
    </div>

添加了以下css样式:

* {
            margin: 0;
            padding: 0;
            font-family: 'Microsoft Yahei'
        }
        a {
            color: #000;
            text-decoration: none;
        }
        .panel {
            margin:20px auto 20px auto;
            width:80%;
            height: 500px;
            transition: all .3s;
        }
        #panel1 {background-color: red;}
        #panel2 {background-color: green;}
        #panel3 {background-color: blue;}



打印id为panel1的offsetTop、offset().top、position().top的值为62 62  42

我为id为container的div添加样式:  style="position: relative;"结果是 0 62 -20,百思不得其解

我有尝试了一个新的思路,在原有的上面的html结构上,添加两个操作:为id为container的div添加样式:  style="position: relative;",在container中,panel1之上添加了一个h1的标签,panel的三个值变为了 62 104 42,

请大大的关注offsetTop这一属性,原先没有h1标签时,它的值是0,可是添加了h1后他的值变为了62,请注意h1的高度只有42,那个20 是从哪来的,唯一的解释是panel1的margin-top是20px,这么一想,脑袋又乱了,margin-top怎么又起作用了?想不通,,,

先写到这,等后续补充。


PS:所有的测试都是在谷歌浏览器上进行。


0
1

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    文章分类
    最新评论