使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)

}
/*=====================
 *名称:appTouch
 *功能:webapp滑动模拟组件
 *参数:相关配置
 ======================*/
varappTouch=function(config,callback){
 this.touchContain=config.tContain;
 this.touchMove=config.tMove;
 this.touchScroller=config.tScroller;
 this.touchScrollerArea=config.tScrollerArea;
 this.callbackfn=callback;
 this.move();
}

appTouch.prototype={
 move:function(e){
  varmonitor=document.getElementById(this.touchContain),//监听容器
  target=document.getElementById(this.touchMove),//移动目标
  scroller=document.getElementById(this.touchScroller),//自定义滚动条
  scrollerArea=document.getElementById(this.touchScrollerArea),//滚动条区域
  sheight=monitor.offsetHeight/target.offsetHeight*monitor.offsetHeight,//自定义滚动条的长度
  st=(target.offsetHeight-monitor.offsetHeight)/(monitor.offsetHeight-sheight),//移动块对应滚轮单位长度
  tslow=4,//到顶/底减基数
  tMove=0,//滑块到顶top值
  tMoveL=tMove+140,//到顶允许下拉范围
  bMove=monitor.offsetHeight-target.offsetHeight,//滑块到底top值
  bMoveL=bMove-140,//到底允许上滑范围
  callbackfn=this.callbackfn,//回调函数
  flg=false,//标记是否滑动
  startY,//标记起始位置
  startTop,//标记滑动起始时的高度值
  move=0;
  //移动距离
  //鼠标事件注册
  addEvent(monitor,"mousedown",moveStart);
  addEvent(monitor,"mousemove",moveIn);
  addEvent(monitor,"mouseup",moveEnd);
  addEvent(window,"mousemove",moveIn);
  addEvent(window,"mouseup",moveEnd);
  //移动设备触摸事件注册
  addEvent(monitor,"touchstart",moveStart);
  addEvent(monitor,"touchmove",moveIn);
  addEvent(monitor,"touchend",moveEnd);
  /**
  *外观/门面模式包装
  */
  /*事件监听*/
  functionaddEvent(el,type,fn){
   if(el.addEventListener){
    el.addEventListener(type,fn,false);
   }elseif(el.attachEvent){
    el.attachEvent("on"+type,fn);
   }else{
    el["on"+type]=fn;
   }
  }

  //取消浏览器默认行为
  functionstop(e){
   //Opera/Chrome/FF
   if(e.preventDefault)
    e.preventDefault();
   //IE
   e.returnValue=false;
  }

  //包装结束
  /**
  *操作函数
  */
  //惯性缓动参数
  varlastMoveTime=0;
  varlastMoveStart=0;
  varstopInertiaMove=false;
  /*移动触发*/
  functionmoveStart(e){
   stop(e);
   flg=true;
   if(e.touches)
    e=e.touches[0];
   startY=e.clientY;
   startTop=target.style.top||0;
   //惯性缓动
   lastMoveStart=startY;
   lastMoveTime=newDate().getTime();
   stopInertiaMove=true;
   scrollerArea.style.visibility="visible";

  }

  /*移动过程中*/
  functionmoveIn(e){
   if(flg){
    stop(e);
    if(e.touches)
     e=e.touches[0];
    move=e.clientY-startY+parseInt(startTop);
    if(move>tMove){
     (move-tMove)/tslow+tMove>tMoveL?move=tMoveL:move=(move-tMove)/tslow+tMove

    }elseif(move<bMove)
     (move-bMove)/tslow+bMove<bMoveL?move=bMoveL:move=(move-bMove)/tslow+bMove;
    target.style.top=move+"px";
    scroller.style.top=-move/st+"px";
    //惯性缓动
    varnowTime=newDate().getTime();
    stopInertiaMove=true;
    if(nowTime-lastMoveTime>300){
     lastMoveTime=nowTime;
     lastMoveStart=e.clientY;
    }
   }
  }

  /*移动结束*/
  functionmoveEnd(e){
   stop(e);
   if(e.touches)
    e=e.touches[0];
   //惯性缓动
   varcontentTop=target.style.top.replace("px","");
   varcontentY=(parseInt(contentTop)+e.clientY-lastMoveStart);
   varnowTime=newDate().getTime();
   varv=(e.clientY-lastMoveStart)/(nowTime-lastMoveTime);
   //最后一段时间手指划动速度
   stopInertiaMove=false;
   (function(v,startTime,contentY){
    vardir=v>0?-1:1;
    //加速度方向
    vardeceleration=dir*0.005;
    functioninertiaMove(){
     if(stopInertiaMove)
      return;
     varnowTime=newDate().getTime();
     vart=nowTime-startTime;
     varnowV=v+t*deceleration;
     varmoveY=(v+nowV)/2*t;
     //速度方向变化表示速度达到0了
     if(dir*nowV>0){
      if(move>tMove){
       callbackfn("到顶了");
       target.style.top=tMove+"px";
       scroller.style.top=tMove+"px";
      }elseif(move<bMove){
       callbackfn("到底了");
       target.style.top=bMove+"px";
       scroller.style.top=-bMove/st+"px";
      }
      setTimeout(function(){
       if(!stopInertiaMove)
        scrollerArea.style.visibility="hidden";
      },4000);
      return;
     }
     move=contentY+moveY;
     if(move>tMove){
      t/=20;
      move=(move-tMove)/10+tMove;
     }elseif(move<bMove){
      t/=20;
      move=(move-bMove)/10+bMove;
     }
     target.style.top=move+"px";
     scroller.style.top=-move/st+"px";
     setTimeout(inertiaMove,10);
    }

    inertiaMove();
   })(v,nowTime,contentY);
   move=0;
   flg=false;
  }

  //操作结束
  /**
  *相关初始化
  */
  //滚动条长度初始化
  scroller.style.height=sheight+"px";
  //初始化结束

 },
 otherInteract:function(){
  //其他功能扩充
 }
}