add files

2018-02-04 17:07:25 +08:00
parent 3ad6e6c760
commit 9411527deb
8 changed files with 2162 additions and 201 deletions
--- a/06-JavaScript进阶/01-offset家族和匀速动画(含轮播图的实现).md
+++ b/06-JavaScript进阶/01-offset家族和匀速动画(含轮播图的实现).md
@@ -21,7 +21,7 @@ JS动画的主要内容如下：

 4、正则

-## offset家族简介
+## offset 家族的组成

 我们知道，三大家族包括：offset/scroll/client。今天来讲一下offset，以及与其相关的匀速动画。

--- a/06-JavaScript进阶/02-scroll家族和缓动动画.md
+++ b/06-JavaScript进阶/02-scroll家族和缓动动画.md
--- a/06-JavaScript进阶/02-缓动动画.md
+++ b/06-JavaScript进阶/02-缓动动画.md
@@ -1,55 +0,0 @@
-
-
-## 缓动动画
-
-### 缓动动画的原理
-
-缓动动画的原理就是：在移动的过程中，步长越来越小。
-
-设置步长为**：目标位置和盒子当前位置的十分之一**。用公式表达，即：
-
-```
-	盒子位置 = 盒子本身位置 + (目标位置 - 盒子本身位置)/ 10；
-```
-
-代码举例：
-
-```html
-<!DOCTYPE html>
-<html>
-<head lang="en">
-    <meta charset="UTF-8">
-    <title></title>
-    <style>
-        div {
-            width: 100px;
-            height: 100px;
-            background-color: pink;
-            position: absolute;
-        }
-    </style>
-</head>
-<body>
-<button>运动到left = 400px</button>
-<div></div>
-
-<script>
-
-    var btn = document.getElementsByTagName("button")[0];
-    var div = document.getElementsByTagName("div")[0];
-
-    btn.onclick = function () {
-        setInterval(function () {
-            //动画原理：盒子未来的位置 = 盒子当前的位置+步长
-            div.style.left = div.offsetLeft + (400 - div.offsetLeft) / 10 + "px";
-        }, 30);
-    }
-
-</script>
-</body>
-</html>
-```
-
-效果：
-
-20180202_2046.gif
--- a/06-JavaScript进阶/03-client家族(可视区).md
+++ b/06-JavaScript进阶/03-client家族(可视区).md
@@ -0,0 +1,178 @@
+
+
+
+## client 家族的组成
+
+### clientWidth 和 clientHeight
+
+盒子调用时：
+
+- clientWidth：获取盒子区域宽度（padding + width）。
+
+- clientHeight：获取盒子区域高度（padding + height）。
+
+body/html调用时：
+
+- clientWidth：获取网页可视区域宽度。
+
+- clientHeight：获取网页可视区域高度。
+
+
+### clientX 和 clientY
+
+event调用：
+
+- clientX：鼠标距离可视区域左侧距离。
+
+-  clientY：鼠标距离可视区域上侧距离。
+
+
+
+### clientTop 和 clientLeft
+
+- clientTop：盒子的上border。
+
+- clientLeft：盒子的左border。
+
+
+## 三大家族 offset/scroll/client 的区别
+
+### 区别1：宽高
+
+- offsetWidth  = width  + padding + border
+- offsetHeight = height + padding + border
+
+- scrollWidth   = 内容宽度（不包含border）
+- scrollHeight  = 内容高度（不包含border）
+
+- clientWidth  = width  + padding
+- clientHeight = height + padding
+
+
+### 区别2：上左
+
+
+offsetTop/offsetLeft：
+
+- 调用者：任意元素。(盒子为主)
+- 作用：距离父系盒子中带有定位的距离。
+
+
+scrollTop/scrollLeft：
+
+- 调用者：document.body.scrollTop（window调用）(盒子也可以调用，但必须有滚动条)
+- 作用：浏览器无法显示的部分（被卷去的部分）。
+
+
+clientY/clientX：
+
+- 调用者：event
+- 作用：鼠标距离浏览器可视区域的距离（左、上）。
+
+
+
+
+## 函数封装：获取浏览器的宽高（可视区域）
+
+函数封装如下：
+
+```javascript
+//函数封装：获取屏幕可视区域的宽高
+function client() {
+    if (window.innerHeight !== undefined) {
+        //ie9及其以上的版本的写法
+        return {
+            "width": window.innerWidth,
+            "height": window.innerHeight
+        }
+    } else if (document.compatMode === "CSS1Compat") {
+        //标准模式的写法（有DTD时）
+        return {
+            "width": document.documentElement.clientWidth,
+            "height": document.documentElement.clientHeight
+        }
+    } else {
+        //没有DTD时的写法
+        return {
+            "width": document.body.clientWidth,
+            "height": document.body.clientHeight
+        }
+    }
+}
+
+```
+
+
+**案例：根据浏览器的可视宽度，给定不同的背景的色。**
+
+> PS：这个可以用来做响应式。
+
+代码如下：（需要用到上面的封装好的方法）
+
+```html
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+</head>
+<body>
+
+<script src="tools.js"></script>
+<script>
+    //需求：浏览器每次更改大小，判断是否符合某一标准然后给背景上色。
+    //  // >960红色，大于640小于960蓝色，小于640绿色。
+
+    window.onresize = fn;  //页面大小发生变化时，执行该函数。
+    //页面加载的时候直接执行一次函数，确定浏览器可视区域的宽，给背景上色
+    fn();
+
+    //封装成函数，然后指定的时候去调用和绑定函数名
+    function fn() {
+        if (client().width > 960) {
+            document.body.style.backgroundColor = "red";
+        } else if (client().width > 640) {
+            document.body.style.backgroundColor = "blue";
+        } else {
+            document.body.style.backgroundColor = "green";
+        }
+    }
+</script>
+</body>
+</html>
+```
+
+
+上当代码中，`window.onresize`事件指的是：在窗口或框架被调整大小时发生。各个事件的解释如下：
+
+- window.onscroll        屏幕滑动
+
+- window.onresize       浏览器大小变化
+
+- window.onload	        页面加载完毕
+
+- div.onmousemove    鼠标在盒子上移动（注意：不是盒子移动）
+
+
+
+## 获取显示器的分辨率
+
+比如，我的电脑的显示器分辨率是：1920*1080。
+
+
+获取显示器的分辨率：
+
+```javascript
+    window.onresize = function () {
+        document.title = window.screen.width + "    " + window.screen.height;
+    }
+```
+
+显示效果：
+
+20180203_2155.png
+
+上图中，不管我如何改变浏览器的窗口大小，title栏显示的值永远都是我的显示器分辨率：1920*1080。
+
+
+