Analyse der Implementierungsmethode zur Rolling und der Trägheitslocker in JS+HTML5 -Mobiltelefonentwicklung

In diesem Artikel werden die Implementierungsmethoden für die Scrollen und die inertiale Lockerung für die Entwicklung von JS+HTML5 -Mobiltelefon beschrieben. Teilen Sie es für Ihre Referenz wie folgt weiter:

1. Scrollen Sie die folgenden drei Implementierungsmethoden:

1) Verwenden Sie den nativen CSS -Attributüberlauf: Scroll Div id = übergeordneter Stil = Überlauf: Scroll; divid = 'Inhalt' Inhaltsbereich /Div /Div /DIV Beachten Sie: Es gibt einen Fehler in Android und fällt nach dem Scrollen auf den oberen Inhaltsbereich zurück. Die Lösung besteht darin, die beiden letztgenannten Methoden zur Implementierung zu verwenden.

2) JS -Programmierungsimplementierung Idee: Vergleichen Sie die Positionsänderungen der Vorder- und Rückseite der Finger auf dem Bildschirm, um den Inhalt des Inhaltselements zu ändern

1. Scrollen

Hier sind drei Implementierungsmethoden:

1) Verwenden Sie den nativen CSS -Attributüberlauf: Scrollen

 <div id = "parent" style = "Überlauf: Scroll;> <div id = 'Inhalt'> Inhaltsbereich </div> </div>

Beachten:

Es gibt einen Fehler in Android und nach dem Scrollen fällt er in den oberen Inhaltsbereich zurück. Die Lösung besteht darin, die beiden letzteren Methoden zur Implementierung zu verwenden

2) Implementierung der JS -Programmierung

Idee: Vergleichen Sie die Position des Inhaltselements vor und nach dem Finger auf dem Bildschirm

Schritt 1: Setzen Sie den Überlauf des Elternteils auf versteckt, setzen Sie die Position des Inhalts auf relativ und oben auf 0;

Schritt 2: Hören Sie sich Berührereignisse an

 var parent = document.getElementById('parent');parent.addEventListener('touchstart', function(e) { // do touchstart});parent.addEventListener('touchmove', function(e) { // do touchmove});parent.addEventListener('touchend', function(e) { // do touchend}); parent.adDeVentListener ('touchend', function (e) {// touchend});

Schritt 3: Implementieren Sie den Bildlaufcode

 /*** Hier wird nur vertikale Scrollen implementiert*/var parent = document.getElementById ('parent'); var content = document.getElementById ('content') var starty = 0; // anfängliche Position var lasty = 0; // Letzte Position Eltern. Content.Style.top.Replace ('PX', ''); - Lasty;

Schritt 4: Optimierung

Der obige Code läuft auf dem Mobiltelefon und enthält viele festgefahrene Ergebnisse.

Zur Optimierung siehe bitte:

3) Verwenden Sie das iScroll4 -Framework

 var scroll = new iscroll ('parent', {hscrollBar: false, vscrollBar: true, checkdomchanges: true});

Framework Offizielle Website: http://cubiq.org/iscroll-4

2. Inertiale Lockerung

Idee: Nehmen Sie die Durchschnittsgeschwindigkeit V der Finger, die während des letzten Zeitraums auf den Bildschirm wischen

 /*** Hier wird nur vertikale Scrollen implementiert*/var parent = document.getElementById ('parent'); var content = document.getElementById ('content') var starty = 0; // anfängliche Position var lasty = 0; // letzte Position/*** Variable zum Lockern*/var lastmovetime = 0; var lastMovestart = 0; var stopinertiamove = false; // Ob nicht mehr übergeordnet werden. varyy = e.touches [0]. Seitey; Datum.Now (); Content.Style.top.Replace ('PX', ''); lastMovetime) // die letzte Zeitspanne Fingerstrich StopInertiamove = False; {if (stopinertiamove) now-time = e.timestamp || "px";

PS: Hier sind einige Tools für die Formatierung und Verschönerung von Code für Sie. Ich glaube, Sie werden sie im zukünftigen Entwicklungsprozess verwenden:

Online -Tools für JavaScript -Code Verschönerung und Formatierung:

http://tools.vevb.com/code/js

JavaScript -Komprimierung/Formatierung/Verschlüsselungstools:

http://tools.vevb.com/code/jscompress

JSON -Code Online -Formatierung/Verschönerung/Komprimierung/Bearbeitung/Konvertieren von Tools:

http://tools.vevb.com/code/jsoncodeFormat

Online -JSON -Code -Überprüfung, Inspektion, Verschönerung und Formatierungswerkzeuge:

http://tools.vevb.com/code/json

For more information about jQuery, please visit this site's special topics: "Summary of common plug-ins and usages of jQuery", "Summary of Ajax usage in jquery", "Summary of jQuery table (table) operation skills", "Summary of jQuery drag and drop effects and techniques", "Summary of jQuery extension skills", "Summary of common classic special effects of jQuery", "Summary of jQuery animation and special effects Verwendungen "und" Zusammenfassung der Verwendung von Jquery Selektor ""

Ich hoffe, dieser Artikel wird für JQuery -Programme aller hilfreich sein.