네이티브 js를 사용하여 웹앱 슬라이딩 효과(관성 슬라이딩, 슬라이딩 리바운드) 캡슐화

네이티브 js를 사용하여 웹앱 슬라이딩 효과(관성 슬라이딩, 슬라이딩 리바운드) 캡슐화_javascript 기술

WBOY

풀어 주다： 2016-05-16 16:49:41

원래의

2497명이 탐색했습니다.

IE 6.0, FF 1.5, Safari 2.0, Opera 9.0 관성보조, 슬라이딩 리바운드 호환 PC 모바일 단말기

외관 모드

코드 복사 코드는 다음과 같습니다.

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 < bMove)
(move - bMove) / tslow bMove < bMoveL ? move = bMoveL : move = (move - bMove) / tslow bMove;
target.style.top = move 'px';
scroller.style.top = -move / st 'px';
//관성 완화
var nowTime = new Date().getTime();
stopInertiaMove = true;
if (nowTime - lastMoveTime > 300) {
lastMoveTime = nowTime;
lastMoveStart = e.clientY;
}
}
}

/*이동 끝*/
function moveEnd(e) {
stop(e);
if (e.touches)
e = e.touches[0];
//관성 완화
var contentTop = target.style.top.replace('px', '');
var contentY = (parseInt(contentTop) e.clientY - lastMoveStart);
var nowTime = new Date().getTime();
var v = (e.clientY - lastMoveStart) / (nowTime - lastMoveTime);
//마지막 기간의 손가락 스와이프 속도
stopInertiaMove = false;
(function(v, startTime, contentY) {
var dir = v > 0 ? -1 : 1;
//가속 방향
var deceleration = dir * 0.005;
function inertiaMove ( ) {
if (stopInertiaMove)
return;
var nowTime = new Date().getTime();
var t = nowTime - startTime;
var nowV = v t * 감속; 🎜> var moveY = (v nowV) / 2 * t;
// 속도 방향 변경은 속도가 0에 도달했음을 나타냅니다.
if (dir * nowV > 0) {
if (move > tMove ) {
callbackfn('맨 위로');
target.style.top = tMove 'px';
scroller.style.top = tMove 'px';
} else if (move < ; bMove) {
callbackfn('end');
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;
} else if ( move < bMove) {
t /= 20;
move = (move - bMove) / 10 bMove;
}
target.style.top = move "px";
스크롤러 .style.top = -move / st 'px';
setTimeout(inertiaMove, 10);
}

inertiaMove();

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

//작업 종료

/**
*관련 초기화
*/
//스크롤 막대 길이 초기화
scroller.style.height = sheight 'px';
//초기화 종료

otherInteract : function() {
//기타 함수 확장
}
}

IE hack CSS

코드 복사 코드는 다음과 같습니다.

body,html {배경색상:#333; 여백: 0; 높이: 100%; 줄 높이: 2.0; 글꼴 계열: 'Microsoft YaHei'; Overflow-y:hidden;}
#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