From 56def7a894d50f6a1b947ddbfed91d2bb549eb21 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Tue, 12 Nov 2019 00:16:23 +0800 Subject: [PATCH] =?UTF-8?q?update:=20scroll=20=E7=9B=B8=E5=85=B3=E5=B1=9E?= =?UTF-8?q?=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...-offset相关属性和匀速动画(含轮播图的实现).md | 8 +- .../25-scroll相关属性和缓动动画.md | 831 ++++-------------- 2 files changed, 177 insertions(+), 662 deletions(-) diff --git a/04-JavaScript基础/24-offset相关属性和匀速动画(含轮播图的实现).md b/04-JavaScript基础/24-offset相关属性和匀速动画(含轮播图的实现).md index a24fa3b..9bbf396 100644 --- a/04-JavaScript基础/24-offset相关属性和匀速动画(含轮播图的实现).md +++ b/04-JavaScript基础/24-offset相关属性和匀速动画(含轮播图的实现).md @@ -121,7 +121,7 @@ js中有一套方便的**获取元素尺寸**的办法就是offset家族。offse `offsetTop`：当前元素相对于其**定位父元素**的垂直偏移量。 -备注：从父亲的 padding 开始算起，父亲的 border 不算。 +备注：从父亲的 padding 开始算起，父亲的 border 不算在内。 举例： @@ -174,13 +174,13 @@ js中有一套方便的**获取元素尺寸**的办法就是offset家族。offse 在父盒子有定位的情况下，offsetLeft == style.left(去掉px之后)。注意，后者只识别行内样式。但区别不仅仅于此，下面会讲。 -### offsetLeft和style.left区别 +### offsetLeft 和 style.left 区别 （1）最大区别在于： offsetLeft 可以返回无定位父元素的偏移量。如果父元素中都没有定位，则body为准。 -style.left 只能获取行内样式，如果父元素中都没有定位，则返回""（意思是，返回空）; +style.left 只能获取行内样式，如果父元素中都没有设置定位，则返回""（意思是，返回空字符串）; （2）offsetTop 返回的是数字，而 style.top 返回的是字符串，而且还带有单位：px。 @@ -196,8 +196,6 @@ div.style.left = "100px"; （3）offsetLeft 和 offsetTop **只读**，而 style.left 和 style.top 可读写（只读是获取值，可写是修改值） -（4）如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。 - 总结：我们一般的做法是：**用offsetLeft 和 offsetTop 获取值，用style.left 和 style.top 赋值**（比较方便）。理由如下： - style.left：只能获取行内式，获取的值可能为空，容易出现NaN。 diff --git a/04-JavaScript基础/25-scroll相关属性和缓动动画.md b/04-JavaScript基础/25-scroll相关属性和缓动动画.md index ef59411..852b7fe 100644 --- a/04-JavaScript基础/25-scroll相关属性和缓动动画.md +++ b/04-JavaScript基础/25-scroll相关属性和缓动动画.md @@ -1,179 +1,18 @@ -## 缓动动画 - -### 三个函数 - -缓慢动画里，我们要用到三个函数，这里先列出来： - -- Math.ceil() 向上取整 - -- Math.floor() 向下取整 - -- Math.round(); 四舍五入 - - -### 缓动动画的原理 - -缓动动画的原理就是：在移动的过程中，步长越来越小。 - -设置步长为**：目标位置和盒子当前位置的十分之一**。用公式表达，即： - -``` - 盒子位置 = 盒子本身位置 + (目标位置 - 盒子本身位置)/ 10； -``` - -代码举例： - -```html - - - - - - - - - -
- - - - -``` - -效果： - -![](http://img.smyhvae.com/20180202_2046.gif) - - -### 缓慢动画的封装（解决四舍五入的问题） - -我们发现一个问题，上图中的盒子最终并没有到达400px的位置，而是只到了396.04px就停住了： - -![](http://img.smyhvae.com/20180202_2140.png) - -原因是：JS在取整的运算时，进行了四舍五入。 - -我们把打印396.04px这个left值打印出来看看： - -![](http://img.smyhvae.com/20180202_2150.png) - -我么发现，通过`div.style.left`获取的值是精确的，通过`div.offsetLeft`获取的left值会进行四舍五入。 - -此时，我们就要用到取整的函数了。 - -通过对缓动动画进行封装，完整版的代码实现如下： - - -```html - - - - - - - - - - -
- - - - -``` - - -实现效果： - -![](http://img.smyhvae.com/20180202_2239.gif) - - -## scroll 家族的组成 +## scroll 相关属性 当我们用鼠标滚轮，滚动网页的时候，会触发window.onscroll()方法。效果如下：（注意看控制台的打印结果） - ![](http://img.smyhvae.com/20180202_2258.gif) ### 1、ScrollWidth 和 scrollHeight -获取盒子的宽高。调用者为节点元素。不包括 border和margin。如下： +`ScrollWidth` 和 `scrollHeight`：获取元素**整个滚动区域**的宽、高。包括 width 和 padding，不包括 border和margin。 -- scrollWidth = width + padding; -- scrollHeight = height + padding; +**注意**：`scrollHeight` 的特点是：如果内容超出了盒子，`scrollHeight`为内容的高（包括超出的内容）；如果不超出，`scrollHeight`为盒子本身的高度。`ScrollWidth`同理。 -scrollHeight有一个特点：如果文字超出了盒子，高度为内容的高（包括超出的内容）；不超出，则是盒子本身高度。 - -举例： ```html @@ -205,8 +44,8 @@ scrollHeight有一个特点：如果文字超出了盒子，高度为内容的 var div = document.getElementsByTagName("div")[0]; - //scrollHeight有一个特点：如果文字超出了盒子，高度为内容的高（包括超出的内容）；不超出，则是盒子本身高度。 - //IE8以下（不包括IE8），为盒子本身内容的多少。 + // `scrollHeight` 的特点是：如果内容超出了盒子，`scrollHeight`为内容的高（包括超出的内容）；如果不超出，`scrollHeight`为盒子本身的高度。 + //IE8以下（不包括IE8），为盒子本身内容的高度。 console.log(div.scrollWidth); console.log(div.scrollHeight); @@ -221,9 +60,19 @@ scrollHeight有一个特点：如果文字超出了盒子，高度为内容的 ### 2、scrollTop 和 scrollLeft -网页被卷去的头部和左边的部分。 +- `scrollLeft`：获取水平滚动条滚动的距离。 -比如说，一个网页往上滚动的时候，上面的部分自然被浏览器遮挡了，遮挡的高度就是scrollTop。 +- `scrollTop`：获取垂直滚动条滚动的距离。 + +**实战经验**： + +当某个元素满足`scrollHeight - scrollTop == clientHeight`时，说明垂直滚动条滚动到底了。 + +当某个元素满足`scrollWidth - scrollLeft == clientWidth`时，说明水平滚动条滚动到底了。 + +这个实战经验非常有用，可以用来判断用户是否已经将内容滑动到底了。比如说，有些场景下，希望用户能够看完“活动规则”，才允许触发接下来的表单操作。 + +### scrollTop 的兼容性 scrollTop 这个属性的写法要注意兼容性，如下。 @@ -259,7 +108,7 @@ scrollTop 这个属性的写法要注意兼容性，如下。 window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop; ``` -### 判断是否已经 DTD声明 +### 判断是否已经 DTD 声明 方法如下： @@ -268,7 +117,7 @@ scrollTop 这个属性的写法要注意兼容性，如下。 document.compatMode === "BackCompat" // 未声明 ``` -### 将 scrollTop 和 scrollLeft封装为 json +### 将 scrollTop 和 scrollLeft 封装为 json 将 scrollTop 和 scrollLeft封装为一个方法，名叫scroll()，返回值为 json。json里的键为 top 和 left。以后就直接调用json.top 和json.left就好。 @@ -483,12 +332,166 @@ function scroll() { // 开始封装自己的scrollTop - 2018-02-03-scrollTop固定导航栏.rar + +## 缓动动画 + +### 三个函数 + +缓慢动画里，我们要用到三个函数，这里先列出来： + +- Math.ceil() 向上取整 + +- Math.floor() 向下取整 + +- Math.round(); 四舍五入 + +### 缓动动画的原理 + +缓动动画的原理就是：在移动的过程中，步长越来越小。 + +设置步长为：**目标位置和盒子当前位置的十分之一**。用公式表达，即： + +``` + 盒子位置 = 盒子本身位置 + (目标位置 - 盒子本身位置)/ 10； +``` + +代码举例： + +```html + + + + + + + + + +
+ + + + +``` + +效果： + +![](http://img.smyhvae.com/20180202_2046.gif) + + +### 缓慢动画的封装（解决四舍五入的问题） + +我们发现一个问题，上图中的盒子最终并没有到达400px的位置，而是只到了396.04px就停住了： + +![](http://img.smyhvae.com/20180202_2140.png) + +原因是：JS在取整的运算时，进行了四舍五入。 + +我们把打印396.04px这个left值打印出来看看： + +![](http://img.smyhvae.com/20180202_2150.png) + +我么发现，通过`div.style.left`获取的值是精确的，通过`div.offsetLeft`获取的left值会进行四舍五入。 + +此时，我们就要用到取整的函数了。 + +通过对缓动动画进行封装，完整版的代码实现如下： + + +```html + + + + + + + + + + +
+ + + + +``` + +实现效果： + +![](http://img.smyhvae.com/20180202_2239.gif) + + ## window.scrollTo()方法举例：返回到顶部小火箭 （1）index.html： - ```html @@ -640,7 +643,6 @@ function scroll() { // 开始封装自己的scrollTop ``` - （2）tools.js: ```javascript @@ -671,495 +673,10 @@ function scroll() { // 开始封装自己的scrollTop ``` - 实现效果： - ![](http://img.smyhvae.com/20180203_1710.gif) 小火箭的图片资源： - ![](http://img.smyhvae.com/20180203-Top.jpg) - - - -## window.scrollTo()方法举例：楼层跳跃（暂略） - - -## 缓动框架封装 - -### 1、缓动框架封装：同时设置多个属性 - -这里我们通过`window.getComputedStyle`的方式获取属性值。 - -**完整代码如下：** - -```html - - - - - - - - - - -
- - - - -``` - - -实现效果： - - -![](http://img.smyhvae.com/20180204_1440.gif) - - -### 2、上方的代码改进：清除定时器 - -上方的代码中，我们还需做一下清除定时器的判断：只有所有的参数都到达指定位置了，我们就清除定时器。 - -完整版代码如下： - - -```html - - - - - - - - - - -
- - - - -``` - - -运行效果同上。 - - -**### 3、进一步深入：如果有要同时执行讴多个动画时，就要用到回调函数（重要）**： - -上面的代码中，我们要做的动画是： - -```javascript - btnArr[0].onclick = function () { - var json = {"left": 100, "top": 200, "width": 300, "height": 300}; - animate(div, json); - } -``` - -上面的代码是执行这一个动画，可如果要同时执行两个动画呢？一般人自然想到的是下面的写法：（错误的写法） - - -```javascript - btnArr[0].onclick = function () { - var json1 = {"left": 100, "top": 200, "width": 300, "height": 300}; - var json2 = {"left": 200, "top": 10, "width": 150, "height": 150}; - animate(div, json1); - animate(div, json2); - } -``` - -但是这样写的话，第二个动画 json2 会把第一个动画 json1 **层叠掉**。也就是说，第一个动画直接就不执行了。效果如下： - - -![](http://img.smyhvae.com/20180204_1526.gif) - -这显然不是我们想看到的。 - -如果我们想先执行第一个动画fn1()，再执行第二个动画fn2()的话，就要用到**回调函数**。意思是，将第二个动画fn2()作为回调函数即可。 - -完整版代码如下： - - -```html - - - - - - - - - - -
- - - - -``` - -效果如下： - - -![](http://img.smyhvae.com/20180204_1600.gif) - - -上方代码中，如果我们要先后完成两个动画，执行的代码是： - - -```javascript - animate(div, json1, function () { //第三个参数是回调，可以保证json1的动画执行结束后，再执行json2的动画 - animate(div, json2); - }) -``` - - -如果想要先后执行两个动画，那就以此类推： - -```javascript - animate(div, json1, function () { //第三个参数是回调，可以保证json1的动画执行结束后，再执行json2的动画 - animate(div, json2,function () { - animate(div,json3); - }); - }) -``` - - - - -**举例：仿360的右下角开机效果** - -代码实现： - -```html - - - - - - - - - -
- -
- -
-
- -
-
- - -``` - - -效果如下： - -![](http://img.smyhvae.com/20180204_1620.gif) - -工程文件： - -- 2018-02-04-仿360开机效果.rar - - - -### 4、对 opacity和 z-index 属性进行单独改进 - -我们以上的代码中，如果要进行动画参数的设置，是直接把参数放到json里面去的。例如： - -```javascript - var json1 = {"left": 100, "top": 200, "width": 300, "height": 300}; - var json2 = {"left": 300, "top": 10, "width": 100, "height": 100}; -``` - -可是，下面这两个属性，却不能这样放到json里，会出现兼容性的问题： - - -``` - opacity: 0.5; //透明度 - z-index: 1; -``` - - -如何改进呢？暂略。