特 效 常用函数
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