El terminal móvil PC es compatible con IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ Asistencia de inercia, rebote deslizante
Modo de fachada
La copia del código es la siguiente:
window.onload = function () {
/*Datos de prueba*/
var insert = '';
para (var i = 0; i <80; i ++) {
insert + = '<div style = "ancho: 100%; text-align: center;"> prueba deslizante' + i + '</div>';
}
document.getElementById ("Movearea"). InnerHtml = insert;
/*Datos de prueba*/
var at = new AppTouch ({
TContain: 'Aparea', // Requerido: ID de área deslizante
TMOVE: 'Movearea', // Requerido: Mueve la identificación del área
tscroller: 'scroller', // requerido: barra de desplazamiento personalizado
Tscrollerarea: 'scrollerarea' // requerido: área de barra de desplazamiento
}, onMoveend);
// a la devolución de llamada superior/inferior
función onMoveend (m) {
//console.log(m);
}
}
/*=============================================================== ======================================================================
* Nombre: AppTouch
* Función: componente de simulación de deslizamiento de aplicaciones web
* Parámetros: configuraciones relacionadas
==============================*/
var appTouch = function (config, llamado) {
this.TouchContain = config.tContain;
this.TouchMove = config.tmove;
this.TouchScroller = config.tscroller;
this.TouchScrollerara = config.tscrollerara;
this.callbackfn = llamado;
this.move ();
}
appTouch.prototype = {
mover: función (e) {
var monitor = document.getElementById (this.TouchContain), // Contenedor de escucha
objetivo = document.getElementById (this.TouchMove), // Mueve el objetivo
scroller = document.getElementById (this.TouchScroller), // Scrollbar personalizado
scrollerarea = document.getElementById (this.TouchScrollerara), // Área de desplazamiento
sheight = monitor.offsetheight /target.offsetheight * monitor.offsetheight, // Personaliza la longitud de la barra de desplazamiento
st = (Target.OffSetheight - Monitor.Offsetheight) /(Monitor.OffSetHEight - Sheight), // Bloque de movimiento correspondiente a la longitud de la unidad del rodillo
tslow = 4, // hasta la parte superior/inferior menos base
tMove = 0, // control deslizante para el valor superior
tmovel = TMove + 140, // El rango desplegable puede superar
bMove = monitor.offsetheight - Target.OffSetheight, // El valor superior del control deslizante
bmovel = bmove - 140, // rango absolutamente ascendente
callbackfn = this.callbackfn, // función de devolución de llamada
flg = false, // si el marcador se desliza
starty, // marque la posición inicial
starttop, // marque el valor de altura al comienzo de deslizamiento
mover = 0;
// Distancia de movimiento
// Registro de eventos del mouse
addevent (monitor, 'mousedown', Movestart);
addEvent (monitor, 'mouseMove', Movein);
addEvent (monitor, 'mouseup', muding);
addevent (ventana, 'mouseMove', Movein);
addEvent (ventana, 'mouseup', mudgeend);
// Registro de eventos táctil del dispositivo móvil
addEvent (monitor, 'touchStart', MovStart);
addEvent (monitor, 'touchmove', MoveIn);
addEvent (monitor, 'touchend', Moveend);
/**
*Embalaje de la apariencia/modo de trabajo de tarifas
*/
/*Evento escuchando*/
función addEvent (el, type, fn) {
if (el.addeventListener) {
el.AdDeventListener (tipo, fn, falso);
} else if (el.attachevent) {
el.attachevent ('on' + type, fn);
} demás {
El ['on' + type] = fn;
}
}
// Cancelar el comportamiento predeterminado del navegador
stop de funciones (e) {
// ópera/Chrome/ff
if (e.preventDefault)
E.PreventDefault ();
//ES DECIR
e.returnValue = false;
}
// El empaque termina
/**
*Función de operación
*/
// Parámetros de flexibilización inercial
var lastmovetime = 0;
var lastmovestart = 0;
var stopinertiamOve = false;
/*Disparador móvil*/
función MovStart (e) {
parar (e);
flg = verdadero;
if (e.touches)
e = e.Touches [0];
starty = e.clienty;
startTop = target.style.top || 0;
// inercial lento
LastMovStart = Starty;
lastmoveTime = new Date (). GetTime ();
stopinertiamOve = verdadero;
scrollerarea.style.visibility = 'visible';
}
/*Durante el movimiento*/
función MoveIn (e) {
if (flg) {
parar (e);
if (e.touches)
e = e.Touches [0];
mover = e.clienty - starty + parseint (starttop);
if (mover> tmove) {
(Mover - Tmove) / TSlow + Tmove> TMovel? mover = tmovel: mover = (mover - tmove) / tslow + tmove
} else if (mover <bmove)
(Mover - BMove) / TSlow + BMove <BMovel? Move = Bmovel: Move = (Move - BMove) / TSLOW + BMOVE;
Target.style.top = Move + 'Px';
scroller.style.top = -move / st + 'px';
// inercial lento
var nowtime = new Date (). GetTime ();
stopinertiamOve = verdadero;
if (nowtime - lastmovetime> 300) {
LastMoVETime = ahora tiempo;
LastMovStart = e.Clienty;
}
}
}
/*Mover end*/
function Moveend (e) {
parar (e);
if (e.touches)
e = e.Touches [0];
// inercial lento
var contenttop = target.style.top.replace ('px', '');
var contenty = (parseInt (contenttop) + e.clienty - lastmovestart);
var nowtime = new Date (). GetTime ();
var v = (e.clienty - lastmovestart) / (ahora tiempo - lastmovetime);
// Los dedos están cortando en el último período de tiempo
stopinertiamOve = false;
(función (V, starttime, contenty) {
var dir = v> 0? -1: 1;
// dirección de aceleración
decisión var = Dir * 0.005;
function inertiAmove () {
if (stopinertiamOve)
devolver;
var nowtime = new Date (). GetTime ();
var t = ahora tiempo - starttime;
var nowv = v + t * desaceleración;
var Movey = (v + nowv)/ 2 * t;
// El cambio en la dirección de la velocidad significa que la velocidad ha alcanzado 0
if (dir * nowv> 0) {
if (mover> tmove) {
callbackfn ('top');
Target.style.top = tMove + 'Px';
scroller.style.top = tmove + 'px';
} else if (mover <bmove) {
callbackfn ('entonces it');
Target.style.top = BMove + 'Px';
scroller.style.top = -bmove / st + 'px';
}
setTimeOut (function () {
if (! stopinertiamOve)
scrollerarea.style.visibility = 'Hidden';
}, 4000);
devolver;
}
Move = Contenty + Movey;
if (mover> tmove) {
t /= 20;
mover = (mover - tmove) / 10 + tMove;
} else if (mover <bmove) {
t /= 20;
mover = (mover - bmove) / 10 + bmove;
}
Target.style.top = Move + "Px";
scroller.style.top = -move / st + 'px';
setTimeOut (inercio, 10);
}
inerciames ();
}) (v, ahora tiempo, contenty);
mover = 0;
flg = falso;
}
// La operación termina
/**
*Inicialización relacionada
*/
// Inicialización de longitud de la barra de desplazamiento
scroller.style.height = sheight + 'px';
// termina la inicialización
},
Otrointeract: functer () {
// se amplían otras funciones
}
}
Es decir, hack css
La copia del código es la siguiente:
cuerpo, html {de fondo de fondo:#333; margen: 0; Altura: 100%; Línea de altura: 2.0; Font-Family: 'Microsoft Yahei'; desbordamiento: oculto;}
#contain {margen: 0 auto; Posición: relativo; Ancho: 100%; MAX-ANCHO: 480PX; _Width: 480px; Altura: 100%; cursor: puntero! importante;}
#apparea {posición: absoluta; Ancho: 100%; Altura: 100%; desbordamiento: oculto; Color de fondo: #fff;}
#topinfo {posición: absoluto; superior: 60px; ancho: 100%; Altura: 60px; Text-Align: Center; tamaño de fuente: 18px; }
#bottominfo {posición: Absolute; Bottom: 0; ancho: 100%;}
#Scrollerara {posición: absoluto; Derecha: 0; Ancho: 1.5%; Altura: 100%; Visibilidad: oculto;}
#scroller {posición: absoluto; arriba: 0; Ancho: 100%; Color de fondo: #AAA;}
#MoVearea {posición: absoluto; arriba: 0px; Ancho: 100%; Color de fondo: #DDD;}
Código HTML
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Meta name = "Viewport" Content = "Width = Device-width, inicial-escala = 1.0, user-Scalable = no">
<Link type = "text/css" href = "css/main.css" rel = "stylesheet">
<title> rebote deslizante </title>
<!-[si LT IE 9]> <! [Endif]->
<roscript> </roscript>
</ablo>
<Body>
<div id = "contener">
<div id = "aparea">
<div id = "topinfo">
logotipo o animación
</div>
<div id = "BottomInfo">
Algunos imformación 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>