一、滑动菜单、图片

var iSpeed=0;
var left=0;
function startMove(obj,iTarg){
  clearInterval(obj.timer);//记得先关定时器
  obj.timer=setInterval(function(){
    iSpeed+=(iTarg-obj.offsetLeft)/5;
    iSpeed*=0.7;
    left+=iSpeed;//用一个变量left解决小数误差的问题

    if(Math.abs(iSpeed)<1 && Math.abs(iTarg-obj.offsetLeft)<1){
      obj.style.left=iTarg+'px';
    }else{
      obj.style.left=left+'px';//console.log(obj.offsetLeft+'/'+iTarg+'/'+iSpeed);
    }
  },30);
}

二、运动过界

function startMove(obj,iTarget){
  clearInterval(obj.timer);
  obj.timer=setInterval(function(){
    iSpeed+=(iTarget-height)/5;
    iSpeed*=0.7;

    if(Math.abs(iSpeed<1) && Math.abs(iTarget-height)<1){
      clearInterval(obj.timer);
    }else{
      height+=iSpeed;
    if(height<0){
      height=0;//如果不做处理,打印出的高度会为负值,这种情况就是运动过界,在IE下会报错
    }
    document.getElementById('txt1').value+=height+'\n';
    obj.style.height=height+'px';
    }
  },30);
}

三、碰撞+拖拽+重力

var iSpeedX=0;
var iSpeedY=0;
var timer=null;

function startMove(){
  clearInterval(timer);
  timer=setInterval(function(){
    var oDiv=document.getElementById('div1');
    iSpeedY+=3;//重力
    var l=oDiv.offsetLeft+iSpeedX;
    var t=oDiv.offsetTop+iSpeedY;

    if(l>=document.documentElement.clientWidth-oDiv.offsetWidth){
      iSpeedX*=-0.8;//反弹+摩擦力
      l=document.documentElement.clientWidth-oDiv.offsetWidth;
    }else if(l<=0){
      iSpeedX*=-0.8;//alert(iSpeedX+'--'+iSpeedY);
      l=0;
    }
    if(t>=document.documentElement.clientHeight-oDiv.offsetHeight){
      iSpeedY*=-0.8;
      iSpeedX*=0.8;//alert(iSpeedX+'--'+iSpeedY);
      t=document.documentElement.clientHeight-oDiv.offsetHeight;
    }else if(t<=0){
      iSpeedY*=-1;
      iSpeedX*=0.8;
      t=0;
    }
    if(Math.abs(iSpeedX)<1){
      iSpeedX=0;
    }
    if(Math.abs(iSpeedY)<1){
      iSpeedY=0;
    }
    if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight){
      clearInterval(timer);alert(0);
    }else{
      oDiv.style.left=l+'px';
      oDiv.style.top=t+'px';//document.title=iSpeedX+'--'+iSpeedY;
    }

  },30);
}

window.onload=function(){
var oDiv = document.getElementById('div1');
//拖拽
var lastX=0;
var lastY=0;

oDiv.onmousedown=function(ev){
  var oEvent=ev||event;
  var disX=oEvent.clientX-oDiv.offsetLeft;
  var disY=oEvent.clientY-oDiv.offsetTop;

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

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

    iSpeedX=l-lastX;
    iSpeedY=t-lastY;

    lastX=l;
    lastY=t;//document.title=iSpeedX+'/'+iSpeedY;

    //div左上角轨迹,类似画笔
    /*var oBox=document.createElement('div');
    oBox.style.left=l+'px';
    oBox.style.top=t+'px';
    document.body.appendChild(oBox);//console.log(l+'--'+t);*/
  };
  document.onmouseup=function(){
    document.onmousemove=null;
    document.onmouseup=null;

    startMove();
  };
clearInterval(timer);
 };

}

04-13 10:47