zoukankan      html  css  js  c++  java
  • 系Javascript框架开发(六) 节点定位

    节点定位就是获取一个元素所在的位置。
    jQuery中和节点定位有关的函数为:
    $.prototype.offset
    $.prototype.position


    在DOM编程中,W3C已规定一系列用来定位节点的成员:
    offsetLeft offsetTop scrollTop scrollLeft getBoundingRect getClientRects
    不过这些属性被浏览器搞得无法直接用。

    节点定位看似简单,实现含很多的技巧。在 jQuery 中,专门定义一个类用来管理定位(内部使用)。

    说到位置,大家肯能想到就是元素的(x, y) 。然后事情不那么简单:
    假设左上角为(0, 0) 位置, 那一个元素的位置是它的 绝对位置
    但如果页面可以滚动,在滚下之后,它的位置如何表示? 这里我把这个位置叫节点的 当前位置。在 CSS 中, 使用 left top 能更改节点位置,但这个位置不是绝对坐标的点,而是相对父节点的位置。我们把这个位置称 偏移位置

    见图


    在 jQuery中, position 返回 偏移位置。 offset 返回当前位置。

    下面一个个解决,如何获取这些位置。


    1. 滚动位置。(滚动条翻转的大小)
    全浏览器都一样:
    elem.srcollTop

    2. 当前位置。
    使用  getBoundingRect 获取,但老浏览器需要手动计算这个值。

    3. 绝对位置。
    在当前位置加上滚动位置,即绝对位置。

    4. 偏移位置。
    当前节点的绝对位置减偏移节点的绝对位置。

    (具体实现可见 jQuery 源码)

  • 相关阅读:
    USACO提交方法
    洛谷 P1967 【货车运输】
    一本通 P1386 【打击犯罪】
    洛谷 P5767 【最优乘车】
    洛谷 P5658 【括号树】
    洛谷 P5657 【格雷码】
    洛谷 P2272 【最大半连通子图】
    二分图匈牙利算法
    最小生成树Kruskal算法
    觉得写出了抽象类和接口,以及概括了设计模式的宗旨
  • 原文地址:https://www.cnblogs.com/xuld/p/1953907.html
Copyright © 2011-2022 走看看