js网页特效-2

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

• 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
                       }
      \]
}
] }

五、实现瀑布流滚动