PC Terminal Mobile é compatível com IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ Assistência de inércia, recuperação de deslizamento
Modo de fachada
A cópia do código é a seguinte:
window.onload = function () {
/*Dados de teste*/
var insert = '';
for (var i = 0; i <80; i ++) {
inserir + = '<div style = "largura: 100%; text-align: Center;"> teste deslizante' + i + '</div>';
}
document.getElementById ("Movearea"). Innerhtml = insert;
/*Dados de teste*/
var at = new AppTouch ({
tContain: 'APELEA', // Necessário: ID da área deslizante
tmove: 'Movearea', // Necessário: Mover ID da área
TSCROLLER: 'Scroller', // necessário: barra de rolagem personalizada
tscrollerAea: 'scrollerarea' // requerido: área de scrollbar
}, onmovend);
// para o retorno de chamada superior/inferior
função onmovend (m) {
//console.log(m);
}
}
/*=============================================================== ==================================================================
* Nome: AppTouch
* Função: componente de simulação deslizante de aplicativos da web
* Parâmetros: configurações relacionadas
==============================*/
var AppTouch = function (config, retorno de chamada) {
this.TouchContain = config.tContain;
this.TouchMove = config.tmove;
this.TouchScroller = config.tscroller;
this.TouchScrollerAea = config.tscrollerAea;
this.callbackfn = retorno de chamada;
this.move ();
}
AppTouch.prototype = {
Move: function (e) {
var Monitor = document.getElementById (this.TouchContain), // Listergy Container
Target = Document.getElementById (this.Touchmove), // Mova o alvo
scroller = document.getElementById (this.tochscroller), // barra de rolagem personalizada
scrollerAea = document.getElementById (this.tochscrollerArea), // área de rolante
Sheight = Monitor.OffSethEight /Target.offsetHeight * Monitor.OffSethEight, // Personalize o comprimento da barra de rolagem
ST = (Target.OffSetHeight - Monitor.OffSethEight) /(Monitor.OffsetHeight - Sheight), // Mova o bloco correspondente ao comprimento da unidade do rolo
tslow = 4, // para a base superior/inferior menos
tmove = 0, // deslizante para o valor superior
tmovel = tmove + 140, // o intervalo suspenso é permitido no topo
bmove = monitor.offsetHeight - Target.offsetHeight, // o valor superior do controle deslizante
bmovel = bmove - 140, // faixa absolutamente de subida
callbackfn = this.callbackfn, // função de retorno de chamada
flg = falso, // se o marcador está deslizando
Starty, // marque a posição inicial
startTop, // marque o valor da altura no início do deslizamento
mover = 0;
// Distância do movimento
// Registro de eventos do mouse
addEvent (Monitor, 'Mousedown', MoveStart);
addEvent (Monitor, 'MouseMove', Movein);
addEvent (monitor, 'mouseup', movend);
addEvent (janela, 'mousemove', movein);
addEvent (janela, 'mouseup', movend);
// Registro de eventos de toque de dispositivo móvel
addEvent (Monitor, 'Touchstart', MoveStart);
addEvent (Monitor, 'Touchmove', Movein);
addEvent (Monitor, 'Toukend', Movend);
/**
*Embalagem do modo de aparência/tarifa
*/
/*Evento escuta*/
função addEvent (el, tipo, fn) {
if (el.addeventListener) {
el.addeventListener (tipo, fn, falso);
} else if (el.attachevent) {
el.attachevent ('on' + tipo, fn);
} outro {
el ['on' + type] = fn;
}
}
// Cancelar o comportamento padrão do navegador
função stop (e) {
// Opera/Chrome/FF
if (E.PreventDefault)
E.PreventDefault ();
// ou seja
e.returnValue = false;
}
// A embalagem termina
/**
*Função de operação
*/
// Parâmetros de flexibilização inercial
var lastMoveTime = 0;
var lastMoVestart = 0;
var stopinertiamove = false;
/*Gatilho móvel*/
função movestart (e) {
pare (e);
flg = true;
if (E.Touches)
e = e.ToCouches [0];
starty = e.clienty;
startTop = Target.style.top || 0;
// lento inercial
lastMovestart = starty;
lastMovetime = new Date (). getTime ();
stopinertiamove = true;
scrollerarea.style.visibility = 'visível';
}
/*Durante o movimento*/
função movein (e) {
if (flg) {
pare (e);
if (E.Touches)
e = e.ToCouches [0];
mover = e.clienty - starty + parseint (startTop);
if (mover> tmove) {
(move - tmove) / tslow + tmove> tmovel? mover = tmovel: mover = (mover - tmove) / tslow + tmove
} else if (mova <bmove)
(mover - bmove) / tslow + bmove <bmovel? mover = bmovel: mover = (mover - bmove) / tslow + bmove;
Target.style.top = move + 'px';
scroller.style.top = -move / st + 'px';
// lento inercial
var nowime = new Date (). getTime ();
stopinertiamove = true;
if (NowTime - LastMovetime> 300) {
LastMovetime = NowTime;
lastMovestart = e.clienty;
}
}
}
/*Mover final*/
função movend (e) {
pare (e);
if (E.Touches)
e = e.ToCouches [0];
// lento inercial
var contentTop = Target.style.top.replace ('px', '');
var contenty = (parseint (contentTop) + e.clienty - lastMovestart);
var nowime = new Date (). getTime ();
var V = (E.Clienty - LastMoVestart) / (NowTime - LastMoveTime);
// Os dedos estão cortando no último período
stopinertiamove = false;
(função (v, starttime, contenty) {
var dir = v> 0? -1: 1;
// Direção de aceleração
Var Decision = Dir * 0,005;
função inertiamove () {
If (Stopinertiamove)
retornar;
var nowime = new Date (). getTime ();
var t = nowTime - starttime;
var agorav = v + t * desaceleração;
var movey = (v + agorav)/ 2 * t;
// Mudança na direção da velocidade significa que a velocidade atingiu 0
if (dir * agorav> 0) {
if (mover> tmove) {
callbackfn ('top');
Target.style.top = tmove + 'px';
scroller.style.top = tmove + 'px';
} else if (move <bmove) {
callbackfn ('então it');
Target.style.top = bmove + 'px';
scroller.style.top = -bmove / st + 'px';
}
setTimeout (function () {
if (! stopinertiamove)
scrollerAea.style.visibility = 'Hidden';
}, 4000);
retornar;
}
mover = contenty + movey;
if (mover> tmove) {
t /= 20;
mover = (mover - tmove) / 10 + tmove;
} else if (move <bmove) {
t /= 20;
mover = (mover - bmove) / 10 + bmove;
}
Target.style.top = move + "px";
scroller.style.top = -move / st + 'px';
setTimeout (inertiamove, 10);
}
inertiamove ();
}) (v, nowime, contenty);
mover = 0;
flg = false;
}
// a operação termina
/**
*Inicialização relacionada
*/
// Inicialização do comprimento da barra de rolagem
scroller.style.Height = sheight + 'px';
// A inicialização termina
},
Outros interactos: function () {
// Outras funções são expandidas
}
}
Ou seja, hackear CSS
A cópia do código é a seguinte:
corpo, html {background-color:#333; margem: 0; Altura: 100%; altura de linha: 2.0; Fonte-família: 'Microsoft Yahei'; Overflow-y: Hidden;}
#Contain {margem: 0 Auto; Posição: relativa; largura: 100%; MAX-LUDA: 480px; _width: 480px; Altura: 100%; Cursor: Ponteiro! Importante;}
#apparea {posição: absoluto; largura: 100%; Altura: 100%; estouro: oculto; Background-Color: #fff;}
#topinfo {posição: absoluto; topo: 60px; largura: 100%; Altura: 60px; Alinhamento de texto: centro; Size da fonte: 18px; }
#bottominfo {posição: absoluto; inferior: 0; largura: 100%;}
#ScrolleRarea {Posição: Absolute; Direita: 0; largura: 1,5%; Altura: 100%; Visibilidade: Hidden;}
#Scroller {Position: Absolute; topo: 0; largura: 100%; Background-Color: #AAA;}
#Movearea {Position: Absolute; Top: 0px; largura: 100%; Background-Color: #DDD;}
Código HTML
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<meta name = "viewport" content = "largura = largura do dispositivo, escala inicial = 1,0, scalable = não">
<link type = "text/css" href = "css/main.css" rel = "STILEET">>
<title> Rebotamento deslizante </title>
<!-[se lt ie 9]> <! [endif]->
<Noscript> </noscript>
</head>
<Body>
<div id = "conter">
<div id = "APEARA">
<div id = "topinfo">
logotipo ou animação
</div>
<div id = "BottomInfo">
Algumas informações 2014-4-28
</div>
<div id = "movearea"> </div>
<div id = "scrollerArea">
<div id = "Scroller"> </div>
</div>
</div>
</div>
<script src = "js/main.js"> </script>
</body>
</html>