Verwenden Sie native JS, um Webapp-Gleiteffekte (Trägheitsgleiten, gleitender Rückprall) zu kapseln. Javascript-Fähigkeiten

Mobiles PC-Terminal, kompatibel mit IE 6.0, FF 1.5, Safari 2.0, Opera 9.0, Trägheitsunterstützung, gleitender Rückprall

Fassadenmodus

Code kopieren Der Code lautet wie folgt:

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 = (move - bMove;
target.style.top = move 'px';
scroller.style.top = -move / st 'px';
//Trägheitserleichterung
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];
//Trägheitseasing
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);
//Fingerwischgeschwindigkeit im letzten Zeitraum
stopInertiaMove = false;
(function(v, startTime, contentY) {
var dir = v > 0 ? -1 : 1;
//Beschleunigungsrichtung
var deceleration = dir * 0.005;
function inertiaMove ( ) {
if (stopInertiaMove)
return;
var nowTime = new Date().getTime();
var t = nowTime - startTime;
var nowV = v t * deceleration;
var moveY = (v nowV) ​​/ 2 * t;
// Die Änderung der Geschwindigkeitsrichtung zeigt an, dass die Geschwindigkeit 0 erreicht hat
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;
}

//Vorgang endet
/**

*Zugehörige Initialisierung

*/
//Initialisierung der Bildlaufleistenlänge
scroller.style.height = sheight 'px';
//Initialisierung endet

},
otherInteract : function() {

//Andere Funktionserweiterung

}
}



IE-Hack-CSS

Code kopieren Der Code lautet wie folgt:

body,html {background-color:#333; Rand: 0; Höhe: 100 %; Zeilenhöhe: 2,0; Schriftfamilie: 'Microsoft YaHei'; overflow-y:hidden;}
#contain{margin: 0 auto; Position:relativ; Breite: 100 %; maximale Breite: 480 Pixel; _width: 480px; Höhe: 100 %; Cursor: Zeiger !important;}
#appArea{position: absolute; Breite: 100 %; Höhe: 100 %; Überlauf: versteckt;  Hintergrundfarbe: #fff;}  
#topInfo{position: absolute;top: 60px;width: 100%; Höhe:60px; Textausrichtung: Mitte; Schriftgröße: 18px; }
#bottomInfo{position: absolute;bottom: 0;width: 100%;}
#scrollerArea{position: absolute; rechts: 0; Breite: 1,5 %; Höhe: 100 %;Sichtbarkeit: ausgeblendet;}
#scroller{position: absolute; oben:0; Breite: 100 %;  Hintergrundfarbe: #aaa;}
#moveArea{position: absolute; oben:0px; Breite: 100 %; Hintergrundfarbe: #ddd;}

HTML代码

复制代码 代码如下:

 
  
  
  
  
  
  
 
 
  

   

    

     Logo oder Animation
    

    

     einige Informationen  28.04.2014
    

    

    

     

    

   

  

  
 

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn