乐鱼电竞

教育行业A股IPO第一股（股票代码 003032）

全国咨询/投诉热线：400-618-4000

jQuery 的尺寸和位置操作

更新时间:2021年10月21日16时14分 来源:乐鱼电竞 浏览次数:


jQuery各匹配元素值语法表如下：

以上参数为空，则是获取相应值，返回的是数字型。

如果参数为数字，则是修改相应值。

参数可以不必写单位。

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动画返回顶部。

②animate动画函数里面有个scrollTop 属性，可以设置位置

③但是是元素做动画，因此 $(“body,html”).animate({scrollTop: 0})

案例： 品优购电梯导航

①当我们滚动到 今日推荐 �？�，就让电梯导航显示出来

②点击电梯导航页面可以滚动到相应内容区域

③核心算法：因为电梯导航�？楹湍谌萸？橐灰欢杂Φ�

④当我们点击电梯导航某个小模块，就可以拿到当前小�？榈乃饕�

⑤就可以把animate要移动的距离求出来：当前索引号内容区�？樗膐ffset().top

⑥然后执行动画即可

电梯导航添加li�？�

①当我们点击电梯导航某个小li， 当前小li 添加current类，兄弟移除类名

②当我们页面滚动到内容区域某个�？椋� 左侧电梯导航，相对应的小li�？�，也会添加current类， 兄弟移除current类。

③触发的事件是页面滚动，因此这个功能要写到页面滚动事件里面。

④需要用到each，遍历内容区域大�？�。 each里面能拿到内容区域每一个模块元素和索引号

⑤判断的条件： 被卷去的头部 大于等于 内容区域里面每个�？榈膐ffset().top

⑥就利用这个索引号找到相应的电梯导航小li添加类。


猜你喜欢：

演示jQuery的链式调用过程【前端面试题】

jQuery框架有什么特点？如何安装jQuery？

jQuery如何使用css方法修改单个样式？

乐鱼电竞前端与移动开发高手班培训

0 分享到：
和我们在线交谈！
【网站地图】【sitemap】