js特效 - Day2
一、水平滚动条 和 垂直滚动条
1.1 核心技术点
1）求滚动条的长度？ 2）拖动滚动条，求内容要走多少？
滚动条的长度取决于滚动内容（滚动内容越长，滚动条越短）；
内容滚动的距离和滚动条走的距离是成倍数关系。
1.2 换算公式
获取滚动条的长度：
滚动条的长度 / 盒子的长度 = 盒子的长度 / 内容的长度
滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度
拖动滚动条，求内容走的长度：
内容走的距离 / 滚动条走的距离 =（内容的长度 - 盒子的长度） / (盒子长度 - 滚动条的长度)
内容走的距离 = （内容的长度 - 盒子的长度） / (盒子长度 - 滚动条的长度) * 滚动条走的距离
二、内置对象document
Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问:
document.head（获取头部）
document.body（获取身体）
document.title （获取标题）
document.documentElement（获取整个html)
Document.compatMode:
-
BackCompat：标准兼容模式关闭
- 浏览器宽度:document.body.clientWidth
CSS1Compat：标准兼容模式开启
浏览器宽度:document.documentElement.clientWidth
BackCompat 对应 quirks mode(怪异模式) , CSS1Compat 对应 strict mode (严格模式) ：早期的浏览器Netscape 4和Explorer 4对css进行解析时，并未遵守W3C标准，这时的解析方式就被我们称之为quirks mode(怪异模式)，但随着W3C的标准越来越重要，众多的浏览器开始依照W3C标准解析CSS，仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式) 。
三、scroll家族
- 3.1 基本概念
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
3.2 处理scroll家族浏览器适配问题
-
ie9+ 和 最新浏览器
window.pageXOffset; （scrollLeft）
window.pageYOffset; （scrollTop）
Firefox浏览器 和 其他浏览器
document.documentElement.scrollTop;
Chrome浏览器 和 没有声明 DTD <DOCTYPE >
document.body.scrollTop;
兼容写法
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
3.3 scrollTo(x,y)
把内容滚动到指定的坐标
格式：scrollTo(xpos,ypos)
xpos 必需；要在窗口文档显示区左上角显示的文档的 x 坐标；
ypos 必需；要在窗口文档显示区左上角显示的文档的 y 坐标 。
网页大部分都没有水平滚动条，所以，这个x 不太常用。
四、什么是Json?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。相比于XML，json易于人阅读和编写，同时也易于机器解析和生成，目前数据传递基本上都使用json。
JSON有两种结构：对象 和 数组，两种结构相互组合从而形成各种复杂的数据结构。
数据在键值对中
数据由逗号分隔
花括号保存对象
方括号保存数组
{
id: '110000',
text: '廊坊分行',
children: \[
{
id: '113000',
text: '廊坊银行开发区支行',
leaf: true
},
{
id: '112000',
text: '廊坊银行解放道支行',
children: \[
{
id: '112200',
text: '廊坊银行三大街支行',
leaf: true
},
{
id: '112100',
text: '廊坊银行广阳道支行',
leaf: true
}
\]
},
{
id: '111000',
text: '廊坊银行金光道支行',
leaf: true
}
\]
}
] }
五、实现瀑布流滚动
