offset
-
元素.offsetHeight
获取元素的客观高度,返回值为数值没有单位,它获取到的包括:元素内容高度+上下padding+上下border -
元素.offsetWidth
获取元素的客观宽度,返回值为数值没有单位,它获取到的包括:元素内容宽度+左右padding+左右border - offsetHeight|offsetWidth与style对象的区别
- offset是只读属性,它可以获取到元素在页面中的宽高,但是不能设置
- style.height或者style.width只能获取到行内样式,写在其他地方的样式不能获取,返回值是带单位的字符串。同时也可以设置值,设置在行内样式中。
- 因此,offset一般用来获取元素的真实宽度和高度,而设置就用style对象
-
元素.offsetParent
找到距离自身最近且有定位的节点。如果上一级没有定位,那么他会一直往上找,都找不到就返回body -
元素.offsetLeft
计算从自身border左侧到offsetParent内边距左侧的距离,就是自身左边框最外侧offsetParent左内边距最外侧的距离,如果不好理解可用画图理解 -
元素.offsetTop
计算从自身border上侧到offsetParent内边距上侧的距离,就是自身上边框最外侧offsetParent上内边距最外侧的距离- 注意:计算时,元素自身不会计算margin,offsetParent不会计算border和margin,如果包含在内的没有设置就忽略不算
- offsetLeft|offsetRight与style对象的区别
- 前三点区别可以看上面,是一样的
- 因为style是直接获取行内样式的值,所以你写多少边偏移值获取到的就是多少,但是如果没有该元素没有设置定位,它设置的边偏移值实际上是无效的,style不管这个,直接返回设置的值。offset获取的是页面客观值,因为设置无效,所以返回0
- 获取左边偏移值或者上边偏移值,style对象获取时会把margin划入元素,整体来计算。而offset永远只会把内容内边距边框看作元素,整体来计算。
- 总结,光用文字描述很难说清楚,一定要去看教案里的图示就很容易理解
几个常用Math方法
-
Math.ceil(数值)
向上取整,例如1.9返回2,1.1也返回2 -
Math.floor(数值)
向下取整,例如1.9返回1,1.1也返回1 -
Math.round(数值)
四舍五入,例如1.9返回2,1.1也返回1,1.5返回2 -
Math.abs(数值)
取绝对值
js匀速动画公式
- 原理公式:当前位置 = 当前位置 + 移动距离
- 在配合定时器实现动画时,定时器执行间隔最好是15毫秒,能保证动画帧率在60左右
完整轮播图案例总结
- 总的来说,就是通过图片对应索引来控制移动距离。
- 在轮播图案例中,索引使用得非常频繁,包括集合索引、自定义索引,用它们来乘以每张图片的宽度,就能获取需要移动的距离。
- 自定义索引是用来记录左右按钮焦点图时当前的位置。集合索引用来实现点击数字按钮实现对应图片的切换。然后再调用动画效果函数就能实现大部分轮播图功能。
- 另外还有一些小细节,这里就不作多说,这个案例非常重要,一定要多看几遍理解。
scroll
-
元素.scrollWidth
获取元素内部内容的宽度 -
元素.scrollHeight
获取元素内部内容的高度 -
元素.scrollLeft
获取拖动X轴滚动条时,内容被卷去的左侧距离 -
元素.scrollTop
获取拖动Y轴滚动条时,内容被卷去的顶侧距离 - 获取浏览器页面被卷去距离兼容写法
- 纵坐标三种:
window.pageYOffset || document.documentElement.scrollTop||document.body.scrollTop
- 横坐标三种:
window.pageXOffset || document.documentElement.scrollLeft||document.body.scrollLeft
- 纵坐标三种:
固定导航案例总结
- 固定导航案例有两个重点
- 一是用到了
window.onscroll
窗体滚动事件 - 二是用到了
scrollTop
,通过卷去顶侧距离和实际模块高度来比较,判断什么时候设置导航栏的样式
- 一是用到了
- 并且因为导航栏使用固定定位后,会出现不占位的情况,下方盒子会顶上来,所以在设置固定定位的同时,还要给下面的盒子设置padding或者margin来保证导航栏原位置的距离存在。
js缓动动画公式
- step = (target - leader) / 10
- leader = leader + step
- 可以看到缓动动画和匀速动画,就是step的值有所出入。匀速动画step是一个定值,而缓动动画step是一个差值,刚开始很大,但随着它们差距越来越小,step就越来越小
访问属性的两种方式
- 对象.style.width使用点语法访问属性是最基本的方式
- 对象.style["width"] 使用中括号语法访问属性这种方式,更加灵活,但是注意内部传入变量是不需要双引号的,字符串才需要
获取样式的另一种方法
- 通过style对象只能获取到行内样式,那么写在其他地方的样式怎么获取呢?
- 主流浏览器使用的是
window.getComputedStyle(元素对象,伪数组).样式名
- ie6-8使用的是
元素对象.currentStyle.样式名
- 这两种方法获取到就是实际在元素上生效的样式,不分书写位置
client
-
元素.clientWidth
获取元素内部的高度 -
元素.clientHeight
获取元素内部的宽度 - 它和scroll的区别,同样它们获取的都是盒子内部的高和宽(即不包括边框),但是scroll获取的是内容,就是说内容如果超出了盒子,它依然会计算。但client就只单纯获取盒子内部的padding和设置的高度。
-
元素.clientTop
获取顶部边框的高度,就是borderTop的粗细 -
元素.clientLeft
获取左边边框的宽度,就是borderLeftd粗细 - client的top和left属性基本没有用,只做了解
获取页面可视区宽高
-
window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0
获取页面可视区域的宽度 -
window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
获取页面可视区域的高度 - 上面的写法是兼容了所有浏览器的写法,如果想要在页面大小发生改变的时候,动态获取新的可视区域宽高,需要使用
window.onresize
窗体大小发生改变事件来配合实现。
旋转木马案例总结
- 在选择木马的案例中,我们要从之前案例的固定思维中跳出来,是移动整个ul元素,来实现里面每个li的轮播显示。但是在选择木马中,直接给li进行样式赋值来移动位置。
- 实际上图片的移动就是给定位了的图片设置left和top值,这个概念一定要记住。所以这个案例中用到数组来里存放对象的形式,来保存每个li的样式属性键值对。通过操作每个对象的索引让每个li的样式变化,从而达到旋转的效果。
- 最后再次用到了变量引入,来实现节流阀的功能。