PC Mobile Terminal ist mit IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ Inertia Assist, Sliding Rebound kompatibel, kompatibel
Fassadenmodus
Die Codekopie lautet wie folgt:
window.onload = function () {
/*Testdaten*/
var Insert = '';
für (var i = 0; i <80; i ++) {
Einfügen + = '<div style = "width: 100%; text-align: center;"> gleittest' + i + '</div>';
}
document.GetElementById ("meepearea"). Innerhtml = Insert;
/*Testdaten*/
var at = new AppTouch ({{
TCONTAIN: 'ACEA', // Erforderlich: Schiebebereich -ID
Tmove: 'meepearea', // erforderlich: Move Area ID ID
TSCROLLER: 'Scroller', // erforderlich: Benutzerdefinierte Bildlaufleiste
tscrollerarea: 'scrollerarea' // Erforderlich: Scrollbar -Bereich
}, onMoveend);
// zum oberen/unteren Rückruf
Funktion onmoveend (m) {
//console.log(m);
}
}
/*================================================================= ======================================================================
* Name: AppTouch
* Funktion: Web -App -Simulationskomponente
* Parameter: Verwandte Konfigurationen
================================*//
var apptouch = function (config, callback) {
this.touchContain = config.tcontain;
this.touchmove = config.tmove;
this.touchScroller = config.tScroller;
this.touchScrollerArea = config.tScrollerAreaa;
this.callbackfn = callback;
this.move ();
}
apptouch.prototype = {
Bewegung: Funktion (e) {
var monitor = document.getElementById (this.touchContain), // Hörer -Container
target = document.getElementById (this.touchMove), // das Ziel verschieben
scroller = document.getElementById (this.touchScroller), // benutzerdefinierte Scrollbar
scrollerarea = document.getElementById (this.touchScrollerarea), // Scroller -Bereich
SHEIGHT = Monitor.offseteight /target.offseteight * monitor.offseteight, // Die Länge der Scrollbar anpassen
ST = (target.offseteight - monitor.offseteight) /(monitor.offseteight - sheight), // Block bewegen, der der Einheitslänge der Rolle entspricht
tslow = 4, // nach oben/unten minus Basis
tmove = 0, // Schieberegler bis zum Top -Wert
tmovel = tmove + 140, // Der Dropdown-Bereich darf oben oben sein
BMOVE = Monitor.Offseteight - target.offseteight, // der oberste Wert des Schiebereglers
bmovel = bmove - 140, // absolut upsilding Range
callbackfn = this.callbackfn, // Rückruffunktion
flg = false, // ob der Marker gleitet
Starty, // markieren Sie die Startposition
Starttop, // markieren Sie den Höhenwert zu Beginn des Gleitens
Bewegung = 0;
// Bewegungsabstand
// Mausereignisregistrierung
AddEvent (Monitor, 'MouseDown', bewegtart);
AddEvent (Monitor, 'Mousemove', Movein);
AddEvent (Monitor, 'MouseUp', Moveend);
AddEvent (Fenster, 'Mousemove', Movein);
AddEvent (Fenster, 'Mausup', Moveend);
// Registrierung von Mobile Device Touch Event Ereignis
AddEvent (Monitor, 'TouchStart', bewegtart);
AddEvent (Monitor, 'Touchmove', Movein);
AddEvent (Monitor, 'Touchend', Moveend);
/**
*Aussehen/Tarifverpackung
*/
/*Ereignishörer*/
Funktion addEvent (el, type, fn) {
if (el.addeventListener) {
El.AddeventListener (Typ, fn, false);
} else if (el.attachevent) {
El.AttacheEvent ('on' + Typ, fn);
} anders {
el ['on' + type] = fn;
}
}
// Das Standardverhalten des Browsers stornieren
Funktion stop (e) {
// Opera/Chrome/ff
if (e.preventDefault)
E.PreventDefault ();
// dh
E. returnValue = false;
}
// Die Verpackung endet
/**
*Betriebsfunktion
*/
// Inertiale Lockerungsparameter
var lastmovetime = 0;
var lastmovestart = 0;
var stopinertiamove = false;
/*Mobiler Trigger*/
Funktion bewegungstart (e) {
Stopp (e);
flg = wahr;
if (e. touches)
e = e.touches [0];
starty = e.clienty;
startTop = target.style.top || 0;
// Inertial langsam
lastMovestart = starty;
lastMovetime = new Date (). GetTime ();
stopInertiamove = true;
scrollerarea.style.visibility = 'sichtbar';
}
/*Während der Bewegung*//
Funktion moveIn (e) {
if (flg) {
Stopp (e);
if (e. touches)
e = e.touches [0];
move = e.clienty - starty + parsesint (starttop);
if (move> tmove) {
(Bewegung - tmove) / tslow + tmove> tmovel? move = tmovel: move = (move - tmove) / tslow + tmove
} else if (Bewegung <bmove)
(Bewegung - BMOVE) / TSLOW + BMOVE <BMOVEL? move = bmovel: move = (move - bmove) / tslow + bmove;
Target.Style.top = Move + 'PX';
scroller.style.top = -move / st + 'px';
// Inertial langsam
var nowTime = new Date (). GetTime ();
stopInertiamove = true;
if (now time - lastMovetime> 300) {
lastMovetime = Now Time;
lastMovestart = e.clienty;
}
}
}
/*Ende des Endes*///
Funktion Moveend (e) {
Stopp (e);
if (e. touches)
e = e.touches [0];
// Inertial langsam
var contentTop = target.style.top.replace ('px', '');
var contenty = (parseInt (contentTop) + e.clienty - lastMovestart);
var nowTime = new Date (). GetTime ();
var v = (e.clienty - lastMovestart) / (nuntime - lastMovetime);
// Die Finger senken in der letzten Zeit
stopInertiamove = false;
(Funktion (v, starttime, contenty) {
var dir = v> 0? -1: 1;
// Beschleunigungsrichtung
var Entscheidung = Dir * 0,005;
Funktion inerteamove () {
if (stopinertiamove)
zurückkehren;
var nowTime = new Date (). GetTime ();
var t = Now Time - StartTime;
var nowv = v + t * Verzögerung;
var movey = (v + nowv)/ 2 * t;
// Änderung der Geschwindigkeitsrichtung bedeutet, dass die Geschwindigkeit 0 erreicht hat
if (dir * nowv> 0) {
if (move> tmove) {
callbackfn ('top');
target.Style.top = tmove + 'px';
scroller.Style.top = tmove + 'px';
} else if (Bewegung <bmove) {
callbackfn ('dann es');
Target.Style.top = BMOVE + 'PX';
scroller.style.top = -bmove / st + 'px';
}
setTimeout (function () {
if (! Stopinertiamove)
scrollerarea.style.visibility = 'versteckt';
}, 4000);
zurückkehren;
}
Move = Contenty + Movey;
if (move> tmove) {
t /= 20;
move = (move - tmove) / 10 + tmove;
} else if (Bewegung <bmove) {
t /= 20;
move = (move - bmove) / 10 + bmove;
}
target.style.top = move + "px";
scroller.style.top = -move / st + 'px';
setTimeout (Inertiamove, 10);
}
InerteiMove ();
}) (v, jetzt Time, Contenty);
Bewegung = 0;
flg = falsch;
}
// Die Operation endet
/**
*Verwandte Initialisierung
*/
// Initialisierung der Scroll -Stange Länge
Scroller.Style.Height = Shight + 'PX';
// Initialisierung endet
},
andereInterakte: function () {
// andere Funktionen werden erweitert
}
}
Dh Hack CSS
Die Codekopie lautet wie folgt:
Body, Html {Hintergrundfarbe:#333; Rand: 0; Höhe: 100%; Zeilenhöhe: 2.0; Schriftfamilie: 'Microsoft Yahei'; Überlauf-y: versteckt;}
#Contain {Margin: 0 Auto; Position: Relativ; Breite: 100%; Max-Breite: 480px; _width: 480px; Höhe: 100%; Cursor: Zeiger! Wichtig;}
#Apparea {Position: absolut; Breite: 100%; Höhe: 100%; Überlauf: versteckt; Hintergrundfarbe: #fff;}
#Topinfo {Position: absolut; ober: 60px; Breite: 100%; Höhe: 60px; Text-Align: Mitte; Schriftgröße: 18px; }
#bottominfo {Position: absolut; unten: 0; Breite: 100%;}
#ScrollerArea {Position: absolut; Rechts: 0; Breite: 1,5%; Höhe: 100%; Sichtbarkeit: versteckt;}
#Scroller {Position: absolut; Top: 0; Breite: 100%; Hintergrundfarbe: #aaa;}
#Movearea {Position: absolut; Oben: 0px; Breite: 100%; Hintergrundfarbe: #ddd;}
HTML -Code
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<meta name = "viewPort" content = "width = Gerätebreite, initial-scale = 1.0, user-scalable = no">
<link type = "text/css" href = "css/main.css" rel = "stylesheet">
<title> Rebound -Rebound </title>
<!-[wenn lt ie 9]> <! [endif]->
<noscript> </noscript>
</head>
<body>
<div id = "content">
<div id = "upea">
<div id = "topinfo">
Logo oder Animation
</div>
<div id = "bottomInfo">
Einige IM-Formation 2014-4-28
</div>
<div id = "meptearea"> </div>
<div id = "scrollerarea">
<div id = "scroller"> </div>
</div>
</div>
</div>
<script src = "js/main.js"> </script>
</body>
</html>