使用原生js封裝webapp滑動效果(慣性滑動、滑動回彈)_javascript技巧

PC 行動裝置相容  IE 6.0 , FF 1.5 , Safari 2.0 , Opera 9.0 慣性助動，滑動回彈

門面模式

複製程式碼 程式碼如下:

window.onload = function() {
 /*测试数据*/
 var insert = '';
 for (var i = 0; i < 80; i++) {
insert += '

滑动测试 ' + i + '

';
 }
 document.getElementById("moveArea").innerHTML = insert;
 /*测试数据   */
 var at = new appTouch({
  tContain : 'appArea', //必选：滑动区域id
  tMove : 'moveArea', //必选：移动区域id
  tScroller : 'scroller', //必选：自定义滚动条
  tScrollerArea : 'scrollerArea'//必选：滚动条区域
 }, onmoveend);
 //到顶/底回调
 function onmoveend(m) {
  //console.log(m);
 }

}
/*=====================
 * 名称: appTouch
 * 功能: web app滑动模拟组件
 * 参数: 相关配置
 ======================*/
var appTouch = 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) {
  var monitor = 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);
  /**
   *外观/门面模式包装
   */
  /*事件监听 */
  function addEvent(el, type, fn) {
   if (el.addEventListener) {
    el.addEventListener(type, fn, false);
   } else if (el.attachEvent) {
    el.attachEvent('on' + type, fn);
   } else {
    el['on' + type] = fn;
   }
  }

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

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

  }

  /*移动过程中*/
  function moveIn(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

    } else if (move      (move - bMove)/ tslow bMove     scroller.style.top = -move / st 'px';
    //慣性緩動
    var ;
    if (nowTime - lastMoveTime > 300) {
     lastMoveTime = nowTime;
     

  /*移動結束*/
  function moveEnd(e) {
   stop(e);
   if (e.touches)

  //慣性緩動

   var contentTop = target.style.top.replace('px', '');
   var contentY = (parseInt(contentTop) e.clientY - lastMoveStart);   var v = (e.clientY - lastMoveStart) / (nowTime - lastMoveTime);
   //最後一段時間手指劃動速度
  stopIse) 🎜>   (function(v, startTime, contentY) {
    var dir = v > 0 ? -1 : 1;
    //加速度方向 inertiaMove( ) {
     if (stopInertiaMove)
      return;
     var nowTime = new Date().getTime();     var moveY = (v nowV)​​ / 2 * t;
     // 速度方向變化表示速度達到0了
     if (dirnowVnown (dir 🎜>       callbackfn('到頂了');
       target.style.top = tMove 'px';
  }   else if (move        callbackfn('到底了');
       target.style.top = bMove 'px';
  .p   }
      setTimeout (function() {
       if (!stopInertiaMove)
        scrollerArea.style.選擇, return;
     }
     move = contentY moveY ;
     if (move > tMove) {
      t /= 20;
      move 🎜>      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;
  
  //作業結束
  /**
   *相關初始化
  */
  //滾動條長度初始化
  scroller.style.height = sheight 'px'; >
 },
 otherInteract : function() {
  //其他功能擴充
 }
}



IE hack css

複製程式碼

程式碼如下:

body,html {背景顏色:#333;保證金：0；高度：100%；行高：2.0；font-family: '微軟雅黑';溢出-y:隱藏;}
#contain{margin: 0 auto;職位：親屬；寬度：100%；最大寬度：480px； _寬度：480px；高度：100%；遊標：指針！重要;}
#appArea{位置：絕對；寬度：100%；高度：100%；溢出：隱藏；  背景顏色：#fff;}  
#topInfo{位置：絕對；上：60px；寬度： 100%；高度：60px；文字對齊：居中；字體大小：18px； }
#bottomInfo{位置：絕對；底部：0；寬度：100%；}
#scrollerArea{位置：絕對；右： 0；寬度：1.5%；高度：100%；可見度：隱藏；}
#scroller{位置：絕對；上：0；寬度：100%；  背景顏色：#aaa;}
#moveArea{位置：絕對;上：0px；寬度：100%；背景顏色：#ddd;}

HTML程式碼

複製程式碼程式碼如下：

 
  
  
  
  
  
  
 
 
  

   

    

      

    

     一些資訊  2014-4-28
    

id="scrollerArea" >