2.动画的实现
①实现原理：利用事件和定时器改变样式属性
②物体渐变：利用opacity
document.getElementById("jb").onclick = function () {
var time2 = 1
var d = setInterval(function () {
time2 -= 0.1
document.getElementById("jb").style.opacity = time2
if (time2 < 0) {
clearInterval(d)
}
}, 1000)
}③div变宽：
document.getElementById("bk").onclick = function () {
var time3 = 80
var e = setInterval(function () {
time3 += 10
document.getElementById("bk").style.width = time3 + "px"
if (time3 == 300) {
clearInterval(e)
}
}, 1000)
}④物体移动：控制margin或定位
document.getElementById("yd").onclick = function () {
var time4 = 1
var f = setInterval(function () {
time4 += 5
document.getElementById("yd").style.marginLeft = time4 + "px"
if (time4 == 500) {
clearInterval(f)
}
}, 1000)
}3.动画的封装：把你要用到的常用动画自己封装起来（学会封装的思路），函数的本质就是把具有特点功能的代码封装在一起，所以，我们可以将动画中可变化的量当做参数进行封装。
4.offset系列
①offsetLeft：
如果父元素没有定位，获取元素距离浏览器最左边的距离
如果父元素有定位，获取元素距离父元素最左边的距离
②offsetTop：
如果父元素没有定位，获取元素距离浏览器最上面的距离
如果父元素有定位，获取元素距离父元素最上面的距离
③offsetWidth：
获取元素的宽度，包括边框以内的，不包括外边距
④offsetHeight：
获取元素的高度，包括边框以内的，不包括外边距
⑤offsetParent：获取父元素
❶ 元素有固定定位，获取到的是null
❷ 元素没有固定定位，如果元素所有的父级元素都没定位，得到body
❸元素没有固定定位，如果元素的父级元素有定位，得到离他最近的有定位的父级元素
⑥注：首先没有offsetRight和offsetBottom，
然后上面提到的定位包括绝对定位和相对定位，固定定位
5.scroll系列
①scrollTop：
获得的是内容超出父元素的高度
比如：往下滚动，内容会向上走，超出部分即为获取到的
②scrollLeft：
获得的是内容超出父元素的高度
比如：往右滚动，内容会向左走，超出部分即为获取到的
③scrollWidth：
获得元素的实际宽度，在内容没有超出盒子时，获得的是盒子的内部宽度。内容超出盒子时获得的是内容实际应有的宽度。
④scrollHeight：
获得元素的实际高度，在内容没有超出盒子时，获得的是盒子的内部高度。内容超出盒子时获得的是内容实际应有的高度。
⑤注：①②设置时要给父元素设置
没有scrollbottom，scrollRight
②③当盒子内部存在滚动条时，获得的高度和宽度不包括滚动条
6.client系列
①clientTop：获得元素上边框的宽度
②clientLeft：获得元素左边框的宽度
③clientWidth：获取元素边框内部的宽度，不包括边框
④clientHeight：获取元素边框内部的高度，不包括边框
⑤注：首先区分③ ④与off对应的区别，包不包括边框
然后 当盒子内部存在滚动条时，获得的高度和宽度不包括滚动条。
