Utilisez JS natif pour encapsuler les effets de glissement d'applications Web (glissade inertielle, rebond coulissant)_compétences Javascript-js tutoriel-php.cn

Utilisez JS natif pour encapsuler les effets de glissement d'applications Web (glissade inertielle, rebond coulissant)_compétences Javascript

WBOY

Libérer： 2016-05-16 16:49:41

original

2453 Les gens l'ont consulté

Terminal mobile PC compatible IE 6.0, FF 1.5, Safari 2.0, Opera 9.0 Assistance inertielle, rebond coulissant

Mode Façade

Copier le code Le code est le suivant :

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';
//Assouplissement de l'inertie
var nowTime = new Date().getTime();
stopInertiaMove = true;
if (nowTime - lastMoveTime > 300) {
lastMoveTime = nowTime;
lastMoveStart = e.clientY;
}
}
}

/*Move end*/
function moveEnd(e) {
stop(e);
if (e.touches)
e = e.touches[0];
//Assouplissement inertiel
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);
//Vitesse de balayage du doigt au cours de la dernière période
stopInertiaMove = false;
(function(v, startTime, contentY) {
var dir = v > 0 ? -1 : 1;
//Direction de l'accélération
var décélération = dir * 0.005;
function inertiaMove ( ) {
if (stopInertiaMove)
return;
var nowTime = new Date().getTime();
var t = nowTime - startTime;
var nowV = v t * décélération; 🎜> var moveY = (v nowV) / 2 * t;
// Le changement de sens de la vitesse indique que la vitesse a atteint 0
if (dir * nowV > 0) {
if (move > tMove ) {
callbackfn('To the top');
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";
scroller .style.top = -move / st 'px';
setTimeout(inertiaMove, 10);
}

inertiaMove();

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

//Fin de l'opération

/**
*Initialisation associée
*/
//Initialisation de la longueur de la barre de défilement
scroller.style.height = sheight 'px';
//Fin de l'initialisation

otherInteract : function() {
//Autre extension de fonction
}
}

IE hack css

Copier le code Le code est le suivant :

corps,html {background-color:#333; marge : 0 ; hauteur : 100 % ; hauteur de ligne : 2,0 ; famille de polices : « Microsoft YaHei » ; overflow-y:hidden;}
#contain{margin: 0 auto; position : relative ; largeur : 100 % ; largeur maximale : 480 px ; _largeur : 480 px ; hauteur : 100 % ; curseur : pointeur !important;}
#appArea{position : absolue ; largeur : 100 % ; hauteur : 100 % ; débordement : caché ;  background-color : #fff;}  
#topInfo{position : absolue;haut : 60 px;largeur : 100 % ; hauteur : 60 px ; alignement du texte : centre ; taille de police : 18 px ; >
#bottomInfo{position : absolue;bottom : 0;width : 100 %;}
#scrollerArea{position : absolue ; à droite : 0 ; largeur : 1,5 % ; hauteur : 100 %;visibilité : cachée;}
#scroller{position : absolue ; haut : 0 ; largeur : 100 % ;  background-color : #aaa;}
#moveArea{position : absolue ; haut :0px ; largeur : 100 % ; couleur d'arrière-plan : #ddd;}

HTML代码

复制代码代码如下 :

  滑动回弹

logo ou animation

quelques informations 2014-4-28