JS特效

offset

offsetWidth,offsetHeight:没有单位，数值类型，检测盒子的宽高，包括padding和border，不包含margin

offsetWidth = padding + border + width

offsetHeight = padding + border + height

offsetTop,offsetLeft:检测在父盒子中距离最近的带有定位的盒子的左上的距离，如果父级盒子都没有定位，那么以body为准，从父亲的padding开始算，不包括父亲的border，包含父亲的padding，也包含自己的margin，但是不包含自己的padding和border,没有单位，数值类型

offsetTop = top + father.padding + margin

offsetLeft = left + father.padding + margin

style.top不一定等于offsetTop

scroll

scrollWidth,scrollHeight:不包括margin,当里面的内容没有超过盒子时，代表的是盒子的宽高，当内容超过盒子时，代表内容的宽高

scrollWidth = width + padding

scrollHeight = height + padding

scrollTop,scrollLeft:网页被卷去的左上,都是body调用

    window.onscroll = function () {
      document.title = document.body.scrollTop;


      //没有dtd约束的
        document.title = document.body.scrollTop;
      //有dtd约束的
        document.title = document.documentElement.scrollTop;

      //兼容写法
        document.title = document.body.scrollTop || document.documentElement.scrollTop;
        document.title = document.body.scrollTop + document.documentElement.scrollTop;
            document.title = window.pageYOffset;
        alert(window.pageYOffset);
        document.title = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;

    }

client

clientHeight,clientWidth:包含padding但是不包含border和margin

clientHeight = padding + height

clientWidth = padding + width

clientTop,clientLeft:代表border

clientTop = borderTop

clientLeft = borderLeft

动画

匀速动画

    function animat(target) {
    //要用定时器先清除定时器
      clearInterval(time);

      //速度固定
      var  speed = target >= box.offsetLeft ? 10: -10;

      time = setInterval(function () {
        //在执行之前就获取当前值和目标值之差
        var val = target - box.offsetLeft;
        box.style.left = box.offsetLeft + speed + "px";
        //目标值和当前值只差如果小于步长，那么就不能在前进了
        //因为步长有正有负，所有转换成绝对值来比较
        if(Math.abs(val)<Math.abs(speed)){
        box.style.left = target + "px";
        clearInterval(time);
      },30);
    }

缓动动画

    function animat(box,target) {

      clearInterval(box.time);

      box.time = setInterval(function () {
        var speed = - (box.offsetLeft - target) / 10;
        //对步长进行二次加工(大于0向上取整,小于0项下取整)
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

        box.style.left = box.offsetLeft + speed + "px";
        if(speed === 0){
          //处理小数赋值
          box.style.left = target + "px";
          clearInterval(box.time);
        }

      },30);
    }

  /**
   * 缓动动画终极版
   * @param ele 元素
   * @param json "属性"：值
   * @param fn 回调函数
   */
    function animate(ele,json,fn) {
        clearInterval(ele.time);
        ele.time = setInterval(function () {

          //清除定时器的标志
          var bool = true;
          //遍历json
          for (var key in json) {
            var leader = parseInt(getStyle(ele, key)) || 0;
            var speed = (json[key] - leader) / 10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            leader = leader + speed;
            ele.style[key] = leader + speed + "px";
            if (json[key] !== leader) {
              bool = false;
            }
          }
          //定时器每次执行的时候都会把bool赋值成true，经过循环所有的属性的动画都结束了。speed都是0，bool出来就还是true
          if (bool) {
            clearInterval(ele.time);
            if(fn){
              fn();
            }
          }

        },25);
    }
  //兼容方法获取元素样式
  function getStyle(ele,attr){
    if(window.getComputedStyle){
      return window.getComputedStyle(ele,null)[attr];
    }
    return ele.currentStyle[attr];
  }

event对象

事件对象获取

    document.onclick = function (event) {
      //兼容写法
      event || window.event;
    }

非重点属性

      console.log(event.timeStamp);//页面刷新时间到点击时的时间差，毫秒
      console.log(event.type);//事件类型，click点击事件
      console.log(event.target);//该事件被传送到的对象,也就是触发事件的对象
      console.log(event.button);//当事件被触发时，返回那个鼠标按钮被点击
      console.log(event.bubbles); //获取事件是否触发冒泡

重点属性:取决于先去坐标系不同，相对于坐标系，鼠标的位置

      console.log(event.pageY);//body(页面)为坐标系
      console.log(event.clientY);//当前可视区域(浏览器)为坐标系
      console.log(event.screenY);//以屏幕为坐标系,基本不用

冒泡

类似响应者链,但是事件不会找到最适的触发，而是都会触发

Snip20170605_3.png

//当点击自盒子时候，父盒子也会触发
    var box1 = document.getElementsByClassName("box1")[0];
    var box2 = document.getElementsByClassName("box2")[0];
    var box3 = document.getElementsByClassName("box3")[0];
    box1.onclick  = function () {
      console.log("点了box1");
    }
    box2.onclick  = function () {
      console.log("点了box2");
    }
    box3.onclick  = function () {
      console.log("点了box3");
    }
    document.body.onclick = function () {
      console.log("点击了body");
    }
    

捕获从上往下 body->...div

冒泡从下往上 div->...body

addEventListener第三个参数true是捕获，false是冒泡

    box1.addEventListener("click", function () {
      console.log("点了box1");
    },true);
    box2.addEventListener("click", function () {
      console.log("点了box2");
    },true);
    box3.addEventListener("click", function () {
      console.log("点了box3");
    },true);
    document.addEventListener("click", function () {
      console.log("点了document");
    },true);

避免冒泡

onBlur 、focus、onload、 onunload、onmouseenter、onmouseleave不会触发冒泡

    //阻止冒泡
    box1.onclick = function (event) {
      //这种方法取消冒泡的机制是到box1这个层级时阻断冒泡继续传递，不会传到body了。但是之前的box2，box3冒泡还是有,
      //冒泡的时候类似响应者链的传递，到这层被阻止了。
      event = event || window.event;
      if (event && event.stopPropagation) {
        event.stopPropagation();
      }else {
        event.cancelBubble = true;
      }
      console.log("点了box1");
    }
    box2.onclick  = function () {
      console.log("点了box2");
    }
    box3.onclick  = function () {
      console.log("点了box3");
    }
    document.body.onclick = function () {
      console.log("点击了body");
    }