06DAY学习WEBAPIS第六天、三大系列总结_clearinterval(element.time)-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44763882/article/details/102882907

学习目标

一、scroll系列、元素/对象的滚动事件

1、scroll系列：卷曲----滚出去

对象的属性	返回值
scrollWidth	获取元素内容的实际宽度
scrollHeight	获取元素内容的实际高度
scrollTop	向上卷曲出去的距离
scrollLeft	向左卷曲出去的距离

2、元素/对象的滚动条事件

语法：元素.onscroll = 事件处理函数

3、封装getScroll函数,获取浏览器向上卷曲上的距离的值，向左卷曲出去的距离,兼容代码

function getScroll() {
     return {
         top: window.pageYOffset || document.documentElement.scrollTop || 					document.body.scrollTop || 0,
         left: window.pageXOffset || document.documentElement || 							document.body.scrollLeft || 0
     };
 }

二、缓动动画函数

每次移动的步数：(目标-当前) / 10

判断移动的步数：正数往上取整，负数往下取整

function animation(element,target){
    //先清理定时器
    clearInterval(element.timeId);
    element.timeId=setInterval(function (){
        //获取当前步数/像素
        var current = element.offsetLeft;
        //每次要走的步数
        var step = (target-current)/10;
        //判断正数往上取整，负数往下取整
        step = step > 0?Math.ceil(step):Math.floor(step);
        //移动后的步数
        current+=step;
        //移动
        element.style.left=current+"px";
        //判断如果移动后的步数跟目标步数一致
        if(current==target){
            //清理定时器
            clearInterval(element.timeId);
        }
        //测试，查看每次移动的步数
        console.log("当前："+current+",目标："+target+",每次移动的"+step);
    },25)
}

三、获取任意元素的任意一个样式属性的值

1、谷歌、火狐支持

参数1：对象/元素

参数2：伪类、为元素，没有就填null

返回值：css3对象，所有样式的的属性
window.getComputedStyle();

2、IE8支持

对象/元素.currentStyle.left

3、兼容代码

获取任意一个元素的任意样式的属性值

function getStyle(element,attr){
 //判断浏览器是否支持这个方法
 return window.getComputedStyle ? window.getComputedStyle(element,null)[attr] : element.currentStyle[attr];
}

四、回调函数

当一个函数作为参数的使用的时候这个函数就是回调函数

五、变速动画函数封装增加任意一个属性

参数1：元素参数2：目标参数3：属性名字

function animation(element,target,attr){
//先清理定时器
clearInterval(element.timeId);
element.timeId = setInterval(function (){
  //获取当前的步数
  var current=parseInt(getStyle(element,attr));//转换成字符串
  //每次要走的步数
  var step = (target-current)/10;
  //每次走的步数是正数往上取整，负数往下取整
  step = step > 0?Math.ceil(step):Math.floor(step);
  //移动后的步数
  current+=step;
  element.style[attr]=current+"px";
  if(current==target){
      //到达目标清理定时器
      clearInterval(element.timeId);
  }
},20)

}

六、变速动画函数封装任意多个属性

参数1：元素参数2：对象 —>{“width”:200,“top”:50···}—>遍历对象里的每个属性

function animation(element,json){
 //先清理定时器
 clearInterval(element.timeId);
 element.timeId = setInterval(function (){
      var flag = true;//默认、全部到达目标
  //遍历对象里的每个属性
     for(var attr in json){
         //获取当前位置，并将得到的字符串转换成数字类型
         var current = parseInt(getStyle(element,attr));
         //当前属性对应的目标
         var target = json[attr];
         //每次要走的步数
			var step = (target-current)/10;
         //每次走的是正数往上取整，负数往下取整
         step = step > 0?Math.ceil(step):Math.floor(step);
         //移动后的步数
         current+=step;
         element.style[attr]=current+"px";
         if(current!=target){
            flag=false;
           }
    	  }
     if(flag){//到达目标
             //清理定时器
             clearInterval(element.timeId);
         }
 },20)
}

七、最终动画函数(包括opacity透明度、z-Index层级)

1、判断遍历的对象里的每个属性名字是否包含：opacity、z-Index

透明度实现思路：

获取当前的透明度 * 100 (*100是方便计算)

正数往上取整，负数往下取整、移动后的步数

给透明度属性名赋值时 / 100

function animation(element,json,fn){
clearInterval(element.timeId);//先清理定时器
//定时器,返回的是定时器的id
element.timeId=setInterval(function (){
  var flag = true;//默认、假设,全部到达目标
  //遍历json对象中的每个属性还有属性对应的目标值
  for(var attr in json){
      //判断这个属性attr中是不是opacity
      if(attr=="opacity"){
         //获取元素当前的透明度,当前的透明度放大100被,方便计算
         var current = getStyle(element,attr) * 100;
          //目标透明放大100倍
         var target = json[attr] * 100;
         var step = (target-current)/10;
         step = step>0?Math.ceil(step):Math.floor(step);
         current+=step;//移动后的值
         element.style[attr]=current / 100;
      }else if(attr=="zIndex"){//判断这个属性attr是不是zIndex
        //层级改变就是直接改变这个属性的值
        element.style[attr]=json[attr];    
     }else{//普通的属性
         var current = parseInt(getStyle(element,attr));
         //当前属性对应的目标值
         var target = json[attr];
         var step = (target-current)/10;
         step = step>0?Math.ceil(step):Math.floor(step);
         current+=step;
         element.style[attr]=current+"px";
     }
      
       if(current!=target){//是否到达目标
             flag = false;
         }
  }
      if(flag){//到达目标
          clearInterval(element.timeId);//清理定时器
          //所有属性到达目标才能使用这个函数,前提是用户传入这个函数
          if(fn){
              fn();  
      }
  }
  //测试代码
  console.log("当前："+current+",目标："+target+",每次移动的步数："+step)
},25);
}

八、client系列：可视区域

clientWidth:可视区域的宽(没有变框),边框内部的宽度

clientHeight:可视区域的高(没有变框),变框内部的高度

clientLeft：左边边框的宽度

clientTop：上边变框的宽度

九、文档鼠标移动事件、查看事件处理函数参数

1、查看事件函数的参数：arguments

2、文档的鼠标移动事件：document.οnmοusemοve=fn

十、总结三大系列

一、offset系列

1、offsetWidth和offsetHeight

offsetWidth = width+padding+border;

offsetWidth（元素实际宽）与自身的border、padding、widtht有关，与父元素无关（就是边框到边框的距离）

offsetHeight = height+padding+border;

offsetHeight （元素实际高）与自身的border、padding、height有关，与父元素无关（就是边框到边框的距离）

offsetHeight 代码请参考 offsetWidth

2、offsetTop和offsetLeft

1.父元素没有脱离文档流

offsetTop 对齐浏览器，自身最边缘（边框）到客户区最上端的距离

offsetTop = 元素到浏览器的高度

offsetLeft 对齐浏览器，自身最边缘（边框）到客户区最左端的距离

offsetLeft = 元素到浏览器最左端的距离

offsetLeft 代码请参考 offsetTop

2.父元素脱离文档流（position:absolute;）

offsetTop 对齐父元素，自身最边缘（边框）到父级最上端的距离

offsetTop = 元素到父级的高度

offsetLeft 对齐父元素，自身最边缘（边框）到父级最左端的距离

offsetLeft = 元素到父级最左端的距离

offsetLeft 代码请参考 offsetTop

3.offsetParent

返回该对象的父级

如果当前元素的父级元素没有进行CSS定位（position为absolute或relative，fixed）,offsetParent为body。

如果当前元素的父级元素中有CSS定位,offsetParent取最近的那个父级元素

二、scroll系列

1.clientWidth和clientHeight

检测盒子的宽高

scrollHeight = height + padding; //不包括border和margin;

如果盒子里面元素的宽度或者高度大于盒子的宽度或者高度，scrollWidth和scrollHeight就是盒子里面元素的宽度或者高度

2、scrollTop和scrollLeft

scrollTop: onscroll事件发生时,元素向上卷曲出去的距离

scrollLeft : onscroll事件发生时,元素向左卷曲出去的距离

3、兼容代码
function getScroll() {
     return {
         left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0,
         top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0
     };
 }
 
 使用方法:
    1. 取得scrollLeft值: getScroll().left
    2. 取得scrollTop值: getScroll().top

三. client系列

1.client系列的4个常用属性

clientWidth : 获取网页可视区域的宽度
clientHeight: 获取网页可视区域的高度
clientX :获取鼠标事件发生时的**当前页面区域(不包括卷曲出去的值)**的水平坐标
clientY :获取鼠标事件发生时的**当前页面区域(不包括卷曲出去的值)**的垂直坐标

2、clientTop和clientLeft (不常用)

clientLeft：左边边框的宽度

clientTop：上边变框的宽度