PC Mobile Terminal est compatible avec IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ Inertia Assist, Sliding Rebound
Mode de façade
La copie de code est la suivante:
window.onload = function () {
/ * Tester les données * /
var insert = '';
pour (var i = 0; i <80; i ++) {
insert + = '<div style = "width: 100%; text-align: Center;"> Test de glissement' + i + '</div>';
}
document.getElementById ("MOVEAREA"). InnerHtml = insert;
/ * Tester les données * /
var at = new AppTouch ({
TContain: «Apparea», // Obligatoire: ID de zone coulissante
Tmove: 'MOVEAREA', // OBLIQUE: déplacer ID de zone
Tscroller: 'Scroller', // requis: barre de défilement personnalisée
Tscrollerarea: 'ScrollerArea' // Obligatoire: zone de barre de défilement
}, onMoveend);
// au rappel supérieur / inférieur
fonction onMoveend (m) {
//console.log(m);
}
}
/ * =======================================================================. ==========================================================================.
* Nom: apptouch
* Fonction: composant de simulation de glissement d'application Web
* Paramètres: configurations connexes
============================== * /
var apptouch = fonction (config, rappel) {
this.touchContain = config.tContain;
this.touchmove = config.tmove;
this.touchscroller = config.tscroller;
this.touchscrollerarea = config.tscrollerarea;
this.callbackfn = rappel;
this.move ();
}
apptouch.prototype = {
Déplacement: fonction (e) {
var monitor = document.getElementById (this.touchContain), // Container Averagegy
cible = document.getElementById (this.touchmove), // déplacez la cible
Scroller = document.getElementById (this.touchscroller), // Couchure personnalisée
scrollerarea = document.getElementById (this.touchscrollerarea), // zone de défilement
sheight = monitor.offsetheight / cible.offsetheight * Monitor.offsetheight, // Personnalisez la longueur de la barre de défilement
st = (cible.offsetheight - Monitor.offsetheight) / (monitor.offsetheight - sheight), // Déplacer le bloc correspondant à la longueur unitaire du rouleau
tslow = 4, // en haut / en bas moins base
tmove = 0, // curseur à la valeur supérieure
tmovel = tmove + 140, // La plage déroulante est autorisée à en haut
bmove = monitor.offsetheight - cible.offsetheight, // la valeur la plus élevée du curseur
bmovel = bmove - 140, // Absolument upsliding gamme
callbackfn = this.callbackfn, // fonction de rappel
flg = false, // si le marqueur glisse
Starty, // Marquez la position de départ
StartTop, // Marquez la valeur de hauteur au début du glissement
déplacer = 0;
// Distance de mouvement
// Enregistrement des événements de souris
Addevent (moniteur, «MousDown», Movestart);
addEvent (moniteur, «Mousemove», Movein);
addEvent (moniteur, «sourisp», movend);
addEvent (fenêtre, «MouseMove», Movein);
addEvent (fenêtre, «sourisp», movend);
// Enregistrement des événements tactiles de l'appareil mobile
addEvent (moniteur, «touchstart», movestart);
addEvent (moniteur, «TouchMove», Movein);
addEvent (moniteur, «touchend», movend);
/ **
* Emballage de mode d'apparence / de travail
* /
/ * Écoute d'événement * /
fonction addevevent (el, type, fn) {
if (el.addeventListener) {
el.addeventListener (type, fn, false);
} else if (el.attachevent) {
el.attachevent ('on' + type, fn);
} autre {
el ['on' + type] = fn;
}
}
// annuler le comportement par défaut du navigateur
fonction stop (e) {
// Opéra / Chrome / FF
if (e.preventdefault)
E.PreventDefault ();
// c'est-à-dire
e.reTurnValue = false;
}
// l'emballage se termine
/ **
* Fonction de fonctionnement
* /
// Paramètres d'assistance inertielle
var lastmoveTime = 0;
var lastmovestart = 0;
var stopInertiamove = false;
/ * Déclencheur mobile * /
fonction movestart (e) {
arrêter (e);
flg = true;
if (e.touches)
e = e.touches [0];
starty = e.clienty;
startTop = Target.style.top || 0;
// Inertial lent
LastMovestart = Starty;
LastMoveTime = new Date (). GetTime ();
stopinerAtiamove = true;
ScrollerArea.style.visibilité = «Visible»;
}
/ * Pendant le mouvement * /
fonction movein (e) {
if (flg) {
arrêter (e);
if (e.touches)
e = e.touches [0];
move = e.clienty - starty + parseInt (startTop);
if (move> tmove) {
(Move - tmove) / tslow + tmove> tmovel? déplacer = tmovel: move = (move - tmove) / tslow + tmove
} else if (bouger <bmove)
(Déplacer - bmove) / tslow + bmove <bmovel? move = bmovel: move = (move - bmove) / tslow + bmove;
Target.style.top = move + 'px';
Scroller.style.top = -move / st + 'px';
// Inertial lent
var nowtime = new Date (). getTime ();
stopinerAtiamove = true;
if (nowtime - LastmoveTime> 300) {
LastmoveTime = NowTime;
LastMovestart = E.Clienty;
}
}
}
/ * Déplacer la fin * /
Fonction Movend (e) {
arrêter (e);
if (e.touches)
e = e.touches [0];
// Inertial lent
var tentttop = cible.style.top.replace ('px', '');
var CONPONTY = (PARSEIINT (ContentTop) + E.Clienty - LastMovestart);
var nowtime = new Date (). getTime ();
var v = (e.clienty - LastMovestart) / (NowTime - LastMoveTime);
// Les doigts se frappent au cours de la dernière période
stopinerAtiamove = false;
(fonction (v, starttime, contenu) {
var dir = v> 0? -1: 1;
// Direction d'accélération
DÉCISION VAR = DIR * 0,005;
fonction inertiamove () {
if (stopinertiamove)
retour;
var nowtime = new Date (). getTime ();
var t = nowtime - starttime;
var nowv = v + t * décélération;
var movey = (v + nowv) / 2 * t;
// Changement dans la direction de la vitesse signifie que la vitesse a atteint 0
if (dir * nowv> 0) {
if (move> tmove) {
callbackfn ('top');
Target.style.top = tmove + 'px';
scroller.style.top = tmove + 'px';
} else if (move <bmove) {
callbackfn ('alors it');
Target.style.top = bmove + 'px';
scroller.style.top = -bmove / st + 'px';
}
setTimeout (function () {
si (! stopinertiamove)
ScrollerArea.style.Visibility = 'Hidden';
}, 4000);
retour;
}
Move = CONPONTY + MOVEY;
if (move> tmove) {
t / = 20;
déplacer = (move - tmove) / 10 + tmove;
} else if (move <bmove) {
t / = 20;
déplacer = (move - bmove) / 10 + bmove;
}
Target.style.top = move + "px";
Scroller.style.top = -move / st + 'px';
setTimeout (Inertiamove, 10);
}
Inertiamove ();
}) (v, maintenant, continement);
déplacer = 0;
flg = false;
}
// l'opération se termine
/ **
* Initialisation connexe
* /
// l'initialisation de la longueur de barre de défilement
Scroller.style.Height = Sheight + 'PX';
// l'initialisation se termine
},
autresinteract: function () {
// D'autres fonctions sont élargies
}
}
IE Hack CSS
La copie de code est la suivante:
corps, html {fond de fond: # 333; marge: 0; hauteur: 100%; hauteur de ligne: 2.0; Font-Family: «Microsoft Yahei»; débordement-y: caché;}
#Contain {margin: 0 auto; Position: relative; Largeur: 100%; largeur maximale: 480px; _Width: 480px; hauteur: 100%; curseur: pointeur! IMPORTANT;}
#Apparea {position: Absolute; Largeur: 100%; hauteur: 100%; débordement: caché; Color d'arrière-plan: #fff;}
#topinfo {position: absolu; top: 60px; largeur: 100%; hauteur: 60px; Texte-aligne: Centre; taille de police: 18px; }
#bottominfo {position: absolu; en bas: 0; largeur: 100%;}
#scrollerarea {position: absolue; à droite: 0; Largeur: 1,5%; hauteur: 100%; Visibilité: cachée;}
#scroller {position: absolue; en haut: 0; Largeur: 100%; Color en arrière-plan: #AAA;}
#movearea {position: absolue; En haut: 0px; Largeur: 100%; Color en arrière-plan: #ddd;}
Code html
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<meta name = "Viewport" content = "width = device-width, initial-scale = 1.0, user-échec = no">
<link type = "text / css" href = "css / main.css" rel = "Stylesheet">
<Title> Sliding Rebound </Title>
<! - [Si lt ie 9]> <! [endif] ->
<noscript> </oscript>
</ head>
<body>
<div id = "contenant">
<div id = "Apparea">
<div id = "topinfo">
logo ou animation
</div>
<div id = "bottominfo">
Un peu d'imformation 2014-4-28
</div>
<div id = "MOVEAREA"> </div>
<div id = "ScrollerArea">
<div id = "Scroller"> </div>
</div>
</div>
</div>
<script src = "js / main.js"> </ script>
</docy>
</html>