您现在的位置:首页 >> 前端 >> 内容

WebAPI基础学习之特效常用函数

时间:2018/5/15 11:21:05 点击:

  核心提示:特 效 常用函数1offset系列.offsetParent 返回离自己最近的定位父元素.offsetLeft 返回元素相对定位父元素的左侧偏移量,不能赋值,赋值要用style.offsetTop 返...

特 效 常用函数

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

Tags:WE EB BA AP 
作者:网络 来源:小小鹏的小小博客