Heim > Web-Frontend > H5-Tutorial > Hauptteil

Beispiele für HTML5-Mobilentwicklungscode für Scrollen und Trägheitsbeschleunigung

黄舟
Freigeben: 2017-03-27 15:23:22
Original
2204 Leute haben es durchsucht

1. Scrollen Es folgen drei Implementierungsmethoden: 1) Verwenden Sie natives CSSAttribut overflow: scroll p id= parent style = overflow:scroll; pid='content' content area/p /p Hinweis: Es gibt einen Fehler in Android, es wird danach zurückgesetzt Scrollen Um den oberen Inhaltsbereich zu erreichen, besteht die Lösung darin, die beiden letztgenannten Methoden zu verwenden, um 2) Ideen zur Implementierung der js-Programmierung zu erreichen: Vergleichen Sie die Positionsänderungen vor und nach der Fingerbewegung auf dem Bildschirm, um den Inhalt des Inhaltselements zu ändern

 1. Scrollen

Es folgen drei Implementierungsmethoden:

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

<div id="parent" style="overflow:scroll;>
    <div id=&#39;content&#39;>内容区域</div>
</div>
Nach dem Login kopieren

Hinweis:

Es gibt einen Fehler in Android. Nach dem Scrollen wird es zum oberen Inhaltsbereich zurückkehren. Die Lösung besteht darin, die letzten beiden Methoden zu verwenden, um

 2) js-Programmierung zu implementieren. Vergleichen Sie die Positionsänderungen vor und nach der Bewegung des Fingers auf dem Bildschirm, um den Inhalt des Inhaltselements zu ändern. Die Position von

Der erste Schritt: Setzen Sie den Überlauf des übergeordneten Elements auf ausgeblendet, setzen Sie die Position des Inhalts auf relativ und oben auf 0 ;

Schritt zwei: Auf Berührungsereignisse achten

Schritt 3: Rolling Code implementieren
var parent = document.getElementById(&#39;parent&#39;);

parent.addEventListener(&#39;touchstart&#39;, function(e) {
    // do touchstart
});
parent.addEventListener(&#39;touchmove&#39;, function(e) {
    // do touchmove
});
parent.addEventListener(&#39;touchend&#39;, function(e) {
    // do touchend
});
Nach dem Login kopieren

Schritt 4: Optimieren
/**
 * 这里只实现垂直滚动
 */
var parent = document.getElementById(&#39;parent&#39;);
var content = document.getElementById(&#39;content&#39;)
var startY = 0; // 初始位置
var lastY = 0; // 上一次位置

parent.addEventListener(&#39;touchstart&#39;, function(e) {
    lastY = startY = e.touches[0].pageY;
});
parent.addEventListener(&#39;touchmove&#39;, function(e) {
    var nowY = e.touches[0].pageY;
    var moveY = nowY - lastY;
    var contentTop = content.style.top.replace(&#39;px&#39;, &#39;&#39;);
    // 设置top值移动content
    content.style.top = (parseInt(contentTop) + moveY) + &#39;px&#39;;
    lastY = nowY;

});
parent.addEventListener(&#39;touchend&#39;, function(e) {
    // do touchend
    var nowY = e.touches[0].pageY;
    var moveY = nowY - lastY;
    var contentTop = content.style.top.replace(&#39;px&#39;, &#39;&#39;);
    // 设置top值移动content
    content.style.top = (parseInt(contentTop) + moveY) + &#39;px&#39;;
    lastY = nowY;
});
Nach dem Login kopieren

Das Obige Code läuft viel besser auf einem Mobiltelefon als auf einem PC

Optimierungsteil Bitte beachten Sie:

 3) Verwenden Sie das iScroll4-Framework

 2. Trägheitseasing
 var scroll = new iScroll(&#39;parent&#39;, {
  hScrollbar: false,
  vScrollbar: true,
  checkDOMChanges : true
  });
Nach dem Login kopieren


Idee: Nehmen Sie die letzte Zeitspanne, in der der Finger über den Bildschirm wischt. Die Durchschnittsgeschwindigkeit v, lassen Sie v entsprechend einer abnehmenden

Funktion

ändern, bis es sich nicht mehr bewegen kann oder v<=0

Das obige ist der detaillierte Inhalt vonBeispiele für HTML5-Mobilentwicklungscode für Scrollen und Trägheitsbeschleunigung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage