PC端网页特效三大系列

 元素偏移量offset系列

该系列相关属性可以动态地得到该元素地位置(偏移)、大小等。

  • 获得元素距离带有定位父元素的位置
  • 获取元素自身的大小(宽度高度)
  • 注意:返回的数值都不带单位

常用属性

注意没有right和bottom。

以父元素为准父元素一定要带有定位,若不带有定位或没有父亲则以body为准。

鼠标在页面中的坐标:e.pagex、e.pageY

offset与style区别

元素可视区client系列

用来获取元素可视区的相关信息。通过该系列的相关属性可以动态地得到该元素的边框大小、元素大小等。

常用属性

拓展:立即执行函数

立即执行函数不需要调用立马能够自己执行的函数。主要作用是创建一个独立的作用域(内部所有变量都是局部变量,不会有命名冲突的情况)

写法:(function(①){})(②)    、 (function(①){}(②))

第一种写法中的②号括号可以看作是调用函数,在里面写入参数可以传递给函数。

第二种写法中的②号括号是同样的作用。

立即执行函数之间用分号隔开。

元素滚动scroll系列

使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等(页面滚动距离通过window.pageXOffset获得)。

常用属性

自身实际大小即内容大小,包含超出的部分。

如果觉得浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏的高度就是被卷去的头部。

滚动条在滚动时会触发 scroll事件。

总结

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值