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

webAPI

01-动画封装

1. 应用到的知识点

   • 点击事件

   • 给元素设置一个绝对定位

   • 定时器(setInterval)

2. 封装动画1的步骤:

   • 让元素设置为绝定位
   • 设置元素的开始位置(从哪开始移动)
   • 设置元素的目标位置(移动到哪)
   • 设置元素每次移动的距离
   • 设置元素每次移动的时间间隔(越短越好)

3. 封装动画1遇到的问题

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

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

   • 如何解决?

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

   • 解决问题的核心步骤

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

4. 将动画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);
   }
   

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

   • 怎么解决?

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

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

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

   • 最后的解决方案

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

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

   • 为什么?

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

   • 怎么解决

     每一个元素(对象)应该对应一个定时器
     
     在每一个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);
     }
     

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

   • 为什么?

     我们在程序中原来只是简单的判断 开始位置和结束位置 值的大小,而现在 向左移动的时候,开始位置的值就是比目标位置的值要大,所以动画就停止了
     
     条件判断写的有问题:
      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);
     }
     

8. 动画的最后一个问题,动画没有执行完,又可以执行另外一个动画

   设置一个标志位(节流阀)
   

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
  

问题:

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