So implementieren Sie die Gesten-Schiebebildschirmumschaltung in einer HTML5-Einzelseite

Dieses Mal zeige ich Ihnen, wie Sie die Bildschirmumschaltung mit Gesten in einer HTML5-Einzelseite implementieren. Was sind die Vorsichtsmaßnahmen für die Gesten-Schiebebildschirmumschaltung in HTML5-Einzelseiten? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Die H5-Einzelseiten-Gesten-Schiebebildschirmumschaltung wird mithilfe von HTML5-Touch-Ereignis (Touch) und CSS3-Animation(Transformation, Übergang)

1 implementiert 🎜>Angenommen, es gibt 5 Seiten, jede Seite nimmt 100 % der Bildschirmbreite ein. Erstellen Sie ein DIV-Container-Ansichtsfenster, stellen Sie seine Breite (Breite) auf 500 % ein, laden Sie dann die 5 Seiten in den Container und lassen Sie dies den gesamten Container wird gleichmäßig auf 5 Seiten aufgeteilt. Schließlich wird die Standardposition des Containers auf 0 und der Überlauf auf ausgeblendet gesetzt, sodass auf dem Bildschirm standardmäßig die erste Seite angezeigt wird.

CSS-Stil:

<div id="viewport" class="viewport">
    <div class="pageview" style="background: #3b76c0" >
        <h3 >页面-1</h3>
    </div>
    <div class="pageview" style="background: #58c03b;">
        <h3>页面-2</h3>
    </div>
    <div class="pageview" style="background: #c03b25;">
        <h3>页面-3</h3>
    </div>
    <div class="pageview" style="background: #e0a718;">
        <h3>页面-4</h3>
    </div>
    <div class="pageview" style="background: #c03eac;">
        <h3>页面-5</h3>
    </div>
</div>

Registrieren Sie Touchstart-, Touchmove- und Touchend-Ereignisse. Wenn Ihr Finger über den Bildschirm gleitet, verwenden Sie die CSS3-Transformation, um die Position des Ansichtsfensters in Echtzeit festzulegen Um beispielsweise die zweite Seite anzuzeigen, legen Sie einfach die Transformation des Ansichtsfensters fest: Translate3d (100%, 0,0) Hier können wir Translate3d anstelle von TranslateX verwenden, um die GPU des Mobiltelefons aktiv zu aktivieren und die Seite zu verschieben reibungsloser.

.viewport{
   width: 500%;
   height: 100%;
   display: -webkit-box;
   overflow: hidden;
   //pointer-events: none; //这句话会导致整个页面上的点击事件失效，如需绑定点击事件，请注掉
   -webkit-transform: translate3d(0,0,0);
   backface-visibility: hidden;
   position: relative;
}

2. Hauptidee

Vom Auflegen des Fingers auf den Bildschirm über das Verlassen des Bildschirms bis hin zum Verlassen des Bildschirms handelt es sich um einen vollständigen Vorgang. Der entsprechende Vorgang löst die folgenden Ereignisse aus:

Finger auf dem Bildschirm: ontouchstart

Finger auf dem Bildschirm gleiten: ontouchmove

Finger weg vom Bildschirm: ontouchend

Wir müssen diese drei Phasen des Berührungsereignisses erfassen Zum Vervollständigen der Seitenverschiebung:

ontouchstart: Variablen initialisieren, Position des Fingers aufzeichnen, aktuelle Zeit aufzeichnen

ontouchmove: Aktuelle Position abrufen, Bewegungsdifferenz deltaX des Fingers berechnen Finger auf den Bildschirm und dann die Seite der Bewegung folgen lassen

/*手指放在屏幕上*/
document.addEventListener("touchstart",function(e){
   e.preventDefault();
   var touch = e.touches[0];
   startX = touch.pageX;
   startY = touch.pageY;
   initialPos = currentPosition;   //本次滑动前的初始位置
   viewport.style.webkitTransition = ""; //取消动画效果
   startT = new Date().getTime(); //记录手指按下的开始时间
   isMove = false; //是否产生滑动
}.bind(this),false);

/*手指在屏幕上滑动，页面跟随手指移动*/
document.addEventListener("touchmove",function(e){
   e.preventDefault();
   var touch = e.touches[0];
   var deltaX = touch.pageX - startX;
   var deltaY = touch.pageY - startY;
   //如果X方向上的位移大于Y方向，则认为是左右滑动
   if (Math.abs(deltaX) > Math.abs(deltaY)){
       moveLength = deltaX;
       var translate = initialPos + deltaX; //当前需要移动到的位置
       //如果translate>0 或 < maxWidth,则表示页面超出边界
       if (translate <=0 && translate >= maxWidth){
           //移动页面
           this.transform.call(viewport,translate);
           isMove = true;
       }
       direction = deltaX>0?"right":"left"; //判断手指滑动的方向
   }
}.bind(this),false);

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese Fälle gelesen haben. Bitte zahlen Sie Beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie Video- und Audio-Tags und Fortschrittsbalken in H5

Neue Interaktion zwischen H5 und C3 Was sind die Funktionen

H5-Tag-Zusammenfassung auf Blockebene

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Gesten-Schiebebildschirmumschaltung in einer HTML5-Einzelseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!