zoukankan      html  css  js  c++  java
  • Jquery复习DAY3( jQuery 尺寸、位置操作)

    7.1 jQuery 尺寸

     *以上参数为空,则是获取相应值,返回的是数字型。
     *如果参数为数字,则是修改相应值。
     *参数可以不必写单位。

    7.2 jQuery 位置

    位置主要有三个: offset()、position()、scrollTop()/scrollLeft()
    1. offset() 设置或获取元素偏移
    ① offset() 方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系。
    ② 该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离,offset().left 用于获取距离文档左侧的距离。
    ③ 可以设置元素的偏移:offset({ top: 10, left: 30 });
    2. position() 获取元素偏移
    ① position() 方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。
    ② 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离,position().left 用于获取距离定
    位父级左侧的距离。
    ③ 该方法只能获取。
    3. scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
    ① scrollTop() 方法设置或返回被选元素被卷去的头部。
    ② 不跟参数是获取,参数为不带单位的数字则是设置被卷去的头部。

     

    其他:

    案例: 品优购电梯导航
    ① 当我们滚动到 今日推荐 模块,就让电梯导航显示出来
    ② 点击电梯导航页面可以滚动到相应内容区域
    ③ 核心算法:因为电梯导航模块和内容区模块一一对应的
    ④ 当我们点击电梯导航某个小模块,就可以拿到当前小模块的索引号
    ⑤ 就可以把animate要移动的距离求出来:当前索引号内容区模块它的offset().top
    ⑥ 然后执行动画即可7. jQuery 尺寸、位置操作
    案例: 品优购电梯导航
    ① 当我们点击电梯导航某个小li, 当前小li 添加current类,兄弟移除类名
    ② 当我们页面滚动到内容区域某个模块, 左侧电梯导航,相对应的小li模块,也会添加current类, 兄弟移除current类。
    ③ 触发的事件是页面滚动,因此这个功能要写到页面滚动事件里面。
    ④ 需要用到each,遍历内容区域大模块。 each里面能拿到内容区域每一个模块元素和索引号
    ⑤ 判断的条件: 被卷去的头部 大于等于 内容区域里面每个模块的offset().top
    ⑥ 就利用这个索引号找到相应的电梯导航小li添加类。
  • 相关阅读:
    有关ubuntu11.04不能正常关机或重启的解决方法
    USRP Experiment 3: Using Airprobe Intercepting GSM Traffic
    GSM900 and GSM1800 ARFCN Frequency
    Linux 下Oracle 开机自启动 与 oratab, dbstart 脚本 说明
    Oracle 网络架构(Networking Architecture) 说明
    Oracle Resource Manager 概述
    Oracle AWR 报告中 No data exists for this section of the report 说明
    Oracle Alerts 与 Metrics(警告与度量)说明
    Oracle Listener 设置密码 示例 说明
    Oracle Resource Manager 概述
  • 原文地址:https://www.cnblogs.com/kangxinzhi/p/12520888.html
Copyright © 2011-2022 走看看