Please enable JavaScript.
Coggle requires JavaScript to display documents.
PC端网页特效 - Coggle Diagram
PC端网页特效
总结
offset包括文本边框
如果文字内容超出了盒子大小，用scroll最合适
offset经常用于获得元素位置
client经常用于获取元素大小
scroll经常用于获取滚动距离
注：页面的滚动距离通过window.pageXOffset获得
元素偏移量offset
概念
动态地得到该元素的位置，偏移，大小
特征
获得元素距离带有定位父元素的位置
获得元素自身的大小（宽度高度）
返回的数值都不带单位
常用属性
element.offsetParent:返回该元素带有定位的父级元素，如果父级没有定位则返回body
element.offsetTop/Left：返回元素相对带有定位父元素上方（左方）的偏移
element.offsetWidth/Height:返回自身包括padding，边框，内容的高度/宽度，返回数值不带单位
offset与style的区别
offset
包含padding，border，width
是只读属性，只能获取不能赋值
获得的数值是没有单位的
如果要获取元素大小位置，用offset更合适
可以得到任意样式表中的样式值
style
获得的是带有单位的字符串
获得不包含padding，border的值
只能得到行内样式表中的样式值
可读属性，可以获取也可以赋值
如果想要给元素更改值，则需要用style改变
元素滚动scroll
概念
动态地得到该元素的大小，滚动距离等
常用属性
element.scrollTop/Left:返回被卷去的上侧/左侧距离，返回数值不带单位
element.scrollWidth/Height:返回自身实际的宽度/高度，不含边框，返回数值不带单位
onscroll事件
当滚动条滚动时就会触发
为盒子添加滚动条
display：auto
元素可视区client
概念
客户端，使用该系列的相关属性来获取元素可视区的相关信息，动态地得到该元素的边框大小，元素大小
常用属性
element.clientWidth/Height:返回自身包括padding，内容区的宽度/高度，不含边框，返回数值不带单位
element.clientTop/Left:返回元素上边/左边框的大小
mouseenter和mouseover的区别
共同点
都是鼠标经过就会触发
不同点
mouseover鼠标经过自身盒子会触发，经过子盒子也会触发
mouseenter只在经过自身盒子触发
原因：mouseenter不会冒泡
注：mouseenter搭配mouseleave鼠标离开，同样不会冒泡
动画函数封装
核心原理
通过定时器setInterval（）不断移动盒子位置
实现步骤
获得盒子当前位置
让盒子在当前位置加上一个移动距离
利用定时器不断重复这个操作
加一个结束定时器的条件