[前端学习]js特效部分学习笔记，第一天

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的样式变化，从而达到旋转的效果。
• 最后再次用到了变量引入，来实现节流阀的功能。