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)

03-拖拽案例

鼠标按下时候的事件
```
onmousedown
```
鼠标抬起时候的事件
```
onmouseup
```

问题:

改变元素的位置:
- 相对定位
- 绝对定位(有一个参照元素 + 脱标)
- 固定定位
- margin
- padding
- 2d位移
- 3d位移
offsetleft
- 就是用来保存元素位置信息的
- 不能设置

js(Dom+Bom)第七天（2）相关推荐

js(Dom+Bom)第七天（1）
JavaScript BOM介绍概念 BOM(Browser Object Model)即浏览器对象模型. 本质: 通过对象抽象浏览器中的一些功能例如:(刷新页面,alert,confirm,po ...
js(Dom+Bom)第一天（1）
JavaScript-DOM(BOM)操作核心知识获取页面元素事件设置样式学习目标能够使用id名,标签名等方式获取页面中元素能够给标签注册点击事件,并实现对应效果能够给标签通过js方式 ...
js(Dom+Bom)第六天（1）
webAPI 01-键盘事件知识点-onkeydown事件[掌握] onkeydown: 当键盘上的键被按下时候触发的一个事件知识点-onkeyup事件[掌握] onkeyup: 键盘上键弹起时候 ...
js(Dom+Bom)第五天（2）
webAPI 01-事件监听为什么要学事件监听之前给元素注册事件的时候,同一个事件会被覆盖掉事件监听的本质通过另外一种方式给元素注册事件, 同时可以解决同一个事件不会被覆盖掉. 知识点-通过 ...
js(Dom+Bom)第五天（1）
JavaScript BOM介绍概念 BOM(Browser Object Model)即浏览器对象模型. 本质: 通过对象抽象浏览器中的一些功能例如:(刷新页面,alert,confirm,po ...
js(Dom+Bom)第一天（2）
webAPI 00-复习内置对象中的方法 01-JavaScript组成知识点-ECMASCRIPT 重点回顾存储容器变量数组对象逻辑语法分支语句循环语句 switch语句知识点- ...
js(Dom+Bom)第八天—Swiper(插件)
Swiper插件(库) 01-基本介绍 Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话).主要使用于移动端的网站.移动web apps,nativ ...
js(Dom+Bom)第四天（1）
webAPI 1-通过DOM节点方式获取元素 1-0注意事项下面的内容都在在文档树上直接操作的 (节点 + 元素)重点是: 与元素相关的内容 1-1与父节点相关的操作方式 1-1-1.知识点-判断父 ...
js(Dom+Bom)第三天（2）
webAPI 0-操作标签属性系统属性作用: 1. 可以操作标签身上的任何一个系统中的自带属性 (id, class, name ....) 2. 还可以操作用户自定义的属性 dom.getAtt ...

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

webAPI

01-动画封装

02-BOM中获取元素的信息

03-拖拽案例

js(Dom+Bom)第七天（2）相关推荐

最新文章

热门文章