JavaScript 拖拽效果-动画

鼠标按下 onmousedown，onmousedown 里边鼠标移动 onmousemove，鼠标释放 onmouseup

复制var oDiv = document.getElementById('box');
var disX = disY = 0;

oDiv.onmousedown = function(ev){
  var ev = ev || event;
  disX = ev.offsetX;
  disY = ev.offsetY;

  document.onmousemove = function(ev){
    var ev = ev || event;
    var l = ev.clientX - disX;
    var t = ev.clientY - disY;

    // 边界限定
    if(l <= 0){
    l = 0;
    }else if(l >= document.documentElement.clientWidth - oDiv.offsetWidth){
    l = document.documentElement.clientWidth - oDiv.offsetWidth;
    }

    if(t <= 0){
    t = 0;
    }else if(t >= document.documentElement.clientHeight - oDiv.offsetHeight){
    t = document.documentElement.clientHeight - oDiv.offsetHeight;
    }

    // 吸附效果
    /* if(l <= 100){
    l = 0;
    }else if(l >= document.documentElement.clientWidth - oDiv.offsetWidth - 100){
    l = document.documentElement.clientWidth - oDiv.offsetWidth;
    }

    if(t <= 0){
    t = 0;
    }else if(t >= document.documentElement.clientHeight - oDiv.offsetHeight){
    t = document.documentElement.clientHeight - oDiv.offsetHeight;
    } */

    oDiv.style.left = l + 'px';
    oDiv.style.top = t + 'px';
  }

  document.onmouseup = function(){
    this.onmousemove = null;
    this.onmouseup = null;
  }
}
js

JavaScript 碰撞检测-动画

复制function konck(node1,node2){

  var l1 = node1.offsetLeft;
  var r1 = node1.offsetLeft + node1.offsetWidth;
  var t1 = node1.offsetTop;
  var b1 = node1.offsetTop + node1.offsetHeight;

  var l2 = node2.offsetLeft;
  var r2 = node2.offsetLeft + node2.offsetWidth;
  var t2 = node2.offsetTop;
  var b2 = node2.offsetTop + node2.offsetHeight;

  if(l2 > r1 || r2 < l1 || t1 > b2 || t2 > b1){
    return false;
  }else{
    return true;
  }
}
js

JavaScript 链式运动-动画

缓动运动框架

每次的步长 = （总路程 - 当前位置） / 运动系数（6-10）

复制function getStyle(el, attr){ 
  return el.currentStyle ? el.currentStyle[attr] : getComputedStyle(el)[attr];
}

function bufferMove(el, obj, fn){// fn就是回调函数
  clearInterval(el.timer);

  el.timer = setInterval(function(){
    var flag = true;// 判断是否所有属性都到达目标值，如果有一个属性没有到目标值，就将 flag 设置为 false。如果全部都到了目标值，那么 flag 就不会被改变为 false，就是初始 true
    for(var attr in obj){
      // 判断 attr 是不是 opacity，是：采用一种获取办法，不是：采用之前的获取方法
      if(attr == 'opacity'){
        var cur = Math.round(getStyle(el, attr) * 100);
      }else{
        var cur = parseInt(getStyle(el, attr));
      }

      var step = (obj[attr] - cur) / 10;
      step = step > 0 ? Math.ceil(step) : Math.floor(step);

      // if(cur == obj[attr]){
      //  clearInterval(el.timer);
      // }

      if(cur != obj[attr]){// 如果有一个当前值，不等于目标值，说明没有全部执行完成
        flag = false;
      }

      // 赋值时也分两种情况，一种是透明度，另一种是带有单位 px 的
      if(attr == 'opacity'){
        el.style.opacity = (cur + step) / 100;
        el.style.filter = 'alpha(opacity=' + (cur + step) + ')';
      }else{
        el.style[attr] = cur + step + 'px';
      }
    }

    if(flag){// 如果 flag 为假，说明没有全部属性达到目标值，那么不清除定时器，如果 flag 为 true 说明全部属性都达到了目标值，就清除定时器
      clearInterval(el.timer);

      // fn && fn();
      // 回调函数的 this 指向 window，当该运动框架适用于元素集合时，this 执行导致报错

      // if(fn) fn();
      // 改 call 就是修改函数的调用时的 this 指向
      if(fn) fn.call(el);
    }
  },20)
}

js