js(Dom+Bom)第七天（2）

webAPI

01-动画封装

应用到的知识点
- 点击事件
- 给元素设置一个绝对定位
- 定时器(setInterval)
封装动画1的步骤:
- 让元素设置为绝定位
- 设置元素的开始位置(从哪开始移动)
- 设置元素的目标位置(移动到哪)
- 设置元素每次移动的距离
- 设置元素每次移动的时间间隔(越短越好)

封装动画1遇到的问题

如果快速的点击按钮,动画会有一个加速的效果

原因: 多次点击按钮的时候,在程序中相当于开启了多个定时器导致的

如何解决?

解决途径: 不管点击多次按钮,始终只有一个定时器

解决问题的核心步骤

1. 将  var timeID = null; 设置为一个全局的公共变量2. 判断是否存在,如果存在就停住定时器,然后子在开启新的定时器(排他思想)
//先判断程序中是否有定时器
if(timeID != null) {//代表已经存在定时器, 立即将存在的定时器删除掉clearInterval(timeID);timeID = null;
}

将动画2封装成一个函数,方便以后调用

这个函数有5个参数:
哪个元素设置动画,
元素的开始位置
元素的结束位置
元素每次移动的距离
元素每次移动的时间间隔function animation(element, current, target, step, time) {//先判断程序中是否有定时器if(timeID != null) {//代表已经存在定时器, 立即将存在的定时器删除掉clearInterval(timeID);timeID = null;}timeID = setInterval(function(){//开始移动元素的位置if(current >= target) {current = target;clearInterval(timeID);}else {current += step;}//设置box的位置element.style.left = current + 'px';}, time);
}

如果将动画封装成一个函数后,每次点击都是从开始的位置 0 重新执行程序

怎么解决?

让元素的 current 值 始终 和 元素实际移动后的位置保持一致

在解决方案中有什么问题?

如何获取当前元素的位置?
DOM.offsetLeft ----> 左侧的距离位置
DOM.offsetTop ----> 上边的距离current = 当前元素的位置;

最后的解决方案

在函数中设置:current = element.offsetLeft;

为什么当页面中出现多个元素的时候,动画只能让最后一个元素执行动画?

为什么?

点击按钮的时候, 程序中共用了一个定时器导致的

怎么解决

每一个元素(对象)应该对应一个定时器在每一个timeID绑定一个对象function animation(element, current, target, step, time) {//让curren 值始终和当前元素的位置保持一致current = element.offsetLeft;//先判断程序中是否有定时器if(element.timeID != null) {//代表已经存在定时器, 立即将存在的定时器删除掉clearInterval(element.timeID);element.timeID = null;}element.timeID = setInterval(function(){//开始移动元素的位置if(current >= target) {current = target;clearInterval(element.timeID);}else {current += step;}//设置box的位置element.style.left = current + 'px';}, time);
}

为什么元素从右向左移动的时候没有动画效果了?

为什么?

我们在程序中原来只是简单的判断 开始位置和结束位置 值的大小,而现在 向左移动的时候,开始位置的值就是比目标位置的值要大,所以动画就停止了条件判断写的有问题:if(current >= target) {current = target;clearInterval(element.timeID);}

怎么解决?

应该是求两点之间的距离 和 每次移动的距离比较大小1.在确定当前位置是否移动到了终点位置(目标位置), 要通过计算两点之间的距离实现
if(Math.abs(target - current) <= Math.abs(step)) {current = target;clearInterval(element.timeID);
}else {current += step;
}2.当元素向左移动的时候,保证每次移动的距离  step 是一个负数(向左移动为负)//开始移动元素的位置
if(current > target) {// 设置为负数step = -Math.abs(step);
}

动画的最后一个问题,动画没有执行完,又可以执行另外一个动画
```
设置一个标志位(节流阀)
```

02-BOM中获取元素的信息

难点在哪?

这个知识点容易和前面鼠标位置信息混淆

复习获取鼠标位置信息
- 怎么获取鼠标位置信息?
```
通过事件对象参数获取
```
- 获取鼠标的坐标信息
  - 事件对象参数.clientX [获取鼠标的横坐标, 相对可视区域的]
  - 事件对象参数.pageX [获取鼠标的横坐标, 相对整个页面,包括滚动条出去的位置]
  - 事件对象参数.screenX [获取鼠标的横坐标, 相对整个屏幕]
  - 事件对象参数.offsetX [获取鼠标的横坐标, 相对当前事件源]
获取页面中元素的相关信息
- offset系列的
  - DOM.offsetLeft : 获取元素在网页中的位置信息
  - DOM.offsetTop : 获取元素在网页中的位置信息
  - DOM.offsetWidth : 获取元素的宽度 ( 内容区域 + 边框 + 内边距 )
  - DOM.offsetHeight: 获取元素的高度 (内容区域 + 边框 + 内边距)
- client系列
  - DOM.clientLeft : 元素左边框的宽度
  - DOM.clientTop : 元素上边框宽度
  - DOM.clientWidth: 元素的宽度(内容器区域 + 内边距)
  - DOM.clientHeight: 元素的高度(内容器区域 + 内边距)
- scroll系列
  - DOM.scrollLeft : 元素内容区域滚动出去的距离(水平距离) [注册一个滚动的事件 onscroll]
  - DOM.scrollTop: 元素内容区域滚动出去的距离(垂直距离) [注册一个滚动的事件 onscroll]
```
//注册一个滚动事件
div.onscroll = function() {console.log(this.scrollTop);
}
```
  - DOM.scrollWidth : 元素元素宽度(超出盒子宽度 + 左padding)
  - DOM.scrollHeight: 元素元素高度(超出盒子高度 + 上下padding)