一、自定义动画
animation: flash 0.5s alternate infinite;
@keyframs flash{
0%{opacity: 0;}
100%{opacity: 1;}
}
延迟执行：start.style.animationDelay = delay + 's';
二、Underscore-min.js
Underscore封装了常用的JavaScript对象操作方法，用于提高开发效率。我们可以将它单独运用到任何一个页面，另外，Underscore还可以被使用在Node.js运行环境。
Underscore中有许多方法在JavaScript1.6中已经被纳入规范，因此在Underscore对象内部，会优先调用宿主环境提供的内置方法（如果宿主环境已经实现了这些方法），以此提高函数的执行效率。
Underscore默认使用_.（下划线）来访问和创建对象。
三、offset家族
3.1offset自己的，用于获取元素尺寸
网页可见区域宽：document.body.clientWidth;
网页可见区域高：document.body.clientHeight;
网页可见区域宽：document.body.offsetWidth（包括边线的宽）;
网页可见区域高：document.body.offsetHeight （包括边线的宽）;
网页正文全文宽：document.body.scrollWidth;
网页正文全文高：document.body.scrollHeight ;
网页被卷去的高：document.body.scrollTop;
网页被卷去的左：document.body.scrollLeft;
3.2offsetWidth和offsetHeight
获取对象自身的宽度和高度，包括内容、边框和内间距，即：offsetWidth = width + border + padding。
注意：和div.style.width的区别是其只能获取行内的数值
3.3offsetLeft和offsetTop
距离第一个有定位的父级盒子左边和上边的距离，注意：父级盒子必须要有定位，如果没有，则最终以body为准！
总结：offsetLeft和offsetTop从父标签的padding开始计算，不包括border。即：从子盒子边框到定位父盒子边框的距离。
3.4offsetParent
返回当前对象的父级（带有定位）盒子，可能是父亲、也可能是爷爷：
3.5offsetXXX和style.XXX的区别
以offsetLeft和style.left来分析，其他的以此类推：
style.left只能获取行内的，而offsetLeft则可以获取到所有的；
offsetLeft 可以返回没有定位盒子距离左侧的位置；而style.left不可以，其只能返回有定位盒子的left;
offsetLeft 返回的是数字，而 style.left 返回的是字符串，除了数字外还带有单位：px;
注意：可以用parseInt进行转化；比如：styleLeft='300px' ---> parseInt(styleLft) ---> 300
offsetLeft是只读的，而style.left是可读写；
如果没有给 当前 元素指定过 top 样式，则 style.top 返回的是空字符串。
四、JS的事件对象-event
只要触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。IE6-8：windom.event；
4.1pageX / pageY、screenX / screenY、clientX/clientY的区别
pageX 和 pageY是以当前文档（绝对定位）为基准，不适用于IE6-8；
screenX 和 screenY是以屏幕为基准进行测量，即：当前元素距离屏幕的尺寸；
clientX 和 clientY是当前可视区域为基准，类似于固定定位。
4.2JS常用事件
onmousemove当鼠标在当前元素中移动的时候触发，鼠标只要移动一像素就会执行的事件，频率非常高；
onmouseover当鼠标进入当前元素时触发，只会被触发一次
onmouseup当鼠标弹起的时候触发
onmousedown当鼠标按下的时候触发
4.3防止拖动时选中内容
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
商品放大要点：
smallX/bigX = 小盒子的宽度/大盒子的宽度
bigX = smallX/(小盒子的宽度/大盒子的宽度);
bigImg.style.left = - pointX / (smallBox.offsetWidth / bigBox.offsetWidth) + 'px';
bigImg.style.top = - pointY / (smallBox.offsetHeight / bigBox.offsetHeight) + 'px';
滚动条的要点：x / (progress_bar.offsetWidth - mask.offsetWidth) * 100；
五、代码的执行-同步和异步
5.1同步执行：下一行代码的执行必须等待上一行代码执行完毕再执行；或者说上一行未执行完毕下一行不能执行。
5.2异步执行：代码各自执行各自的，互相独立。
5.3初始化执行：网页一发布就执行的代码称之为初始化中执行；初始化也是同步执行的一种。
六、水平滚动条和垂直滚动条
6.1核心技术点：求滚动条的长度、拖动滚动条，求内容要走多少？
滚动条的长度取决于滚动内容（滚动内容越长，滚动条越短）；
内容滚动的距离和滚动条走的距离是成倍数关系。
6.2换算公式
获取滚动条的长度：滚动条的长度/盒子的长度 = 盒子的长度/内容的长度
滚动条长度 = （盒子的宽度/内容的宽度）*盒子的宽度；
拖动滚动条，求内容走的长度：内容走的距离/滚动条走的距离 = （内容的长度-盒子的长度）/（盒子长度-滚动条的长度）
内容走的距离=（内容的长度-盒子的长度）/（盒子长度-滚动条的长度）*滚动条走的距离
七、内置对象document
document对象是window对象的一部分，可通过window.document属性对其进行访问
document对象使我们可以从脚本中对HTML页面中所有元素进行访问：
document.head（获取头部）
document.body（获取身体）
document.title（获取标题）
document.documentElement（获取整个html）
八、scroll家族
8.1基本概念
网页正文全文宽：document.body.scrollWidth;
网页正文全文高：document.body.scrollHeight;
网页被卷去的高：document.body.scrollTop;
网页被卷去的左：document.body.scrollLeft;
8.2处理scroll家族浏览器适配问题
ie9+和最新浏览器（谷歌和火狐最新）：
window.pageXOffset;（scrollLeft） window.pageYOffset;（scrollTop）
Firefox浏览器和其他浏览器（ie浏览器）：
document.documentElement.scrollTop;
chrome浏览器
document.body.scrollTop;
兼容写法：var scrollTop = window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop || 0；
8.3scrollTo（x，y）：把内容滚动到指定的坐标
格式：scrollTop（xpos，ypos）
xpos必需；要在窗口文档显示区左上角显示的文档的x坐标；
ypos必需；要在窗口文档显示区左上角显示的文档的y坐标。网页大部分都没有水平滚动条，所以，x不太常用。
九、什么是Json
JSON(JavaScriptObject Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。相比于XML，json易于人阅读和编写，同时也易于机器解析和生成，目前数据传递基本上都使用json。
JSON有两种结构：对象 和 数组，两种结构相互组合从而形成各种复杂的数据结构。
数据在键值对中；数据由逗号分隔；花括号保存对象；方括号保存数组。
