特 效 常用函数
1> offset 系列
.offsetParent 返回离自己最近的'定位父元素'
.offsetLeft 返回元素相对'定位父元素'的左侧偏移量, 不能赋值, 赋值要用 style
.offsetTop 返回元素相对'定位父元素'的顶部偏移量, 不能赋值, 赋值要用 style
.offsetWidth 元素的宽 值 = content + padding + border
.offsetHeigh 元素的高 值 = content + padding + border
2> client 系列
.clientWidth 元素可视区宽度 值 = content + padding
.clientHeight 元素可视区高度 值 = content + padding
.clientLeft 返回左边框宽度, 不常用
.clinetTop 上边框宽度
3> scroll 系列
.scrollLeft 元素左侧滚动出去的距离
.scrollTop 元素顶部滚动出去的距离
.scrollWidth 元素内容宽度
.scrollHeight 元素内容高度
返回的值均为最终渲染结果
4> 获取浏览器窗口可视区的宽高
- window.innerWidth
- window.innerHeight
( ie8 不兼容, 改为:
- document.documentElement.clientWidth // 或者 document.body.clientWidth
- document.documentElement.clientHeight // document.body.clientHeight )
window.pageYOffset 获取页面顶部滚动出去的距离
window.pageXOffset 获取页面水平滚动出去的距离
监听滚动事件:
.onscroll = function(){}
鼠标按下事件:
.onmousedown() = function(){}
等效:
- '.onmouseover => .onmouseenter'
- '.onmouseout => .onmouseleave'
鼠标拖拽的实现思路:
鼠标拖拽在 mousedown 事件中加一个 mousemove 事件
为了防止鼠标移动太快导致拖拽失效, 可以把 mousemove 和 mouseup 注册给 document
来源: https://www.2cto.com/kf/201805/746166.html