H5シングルジェスチャースライドスクリーンスイッチは、HTML5タッチイベント（Touch）とCSS3アニメーション（トランジション）を使用して実装されています。
1。実装原則5ページがあると仮定すると、各ページが100％幅の画面を占め、Divコンテナビューポートを作成し、幅（幅）を500％に設定し、5ページをコンテナに入れて、これらの5ページを5ページを5ページに分割させます。
<div id = viewport class = viewport> <div class = pageview style = background：＃3b76c0> <h3> page -1 </h3> </div> <div class = pageview = backggggggggggggggg round：＃58c03b;> <h3 > page -2 </h3> </div> <div class = pageview style = background：＃c03b25;> <h3> page -3 </h3> </div> <div class = pageview style =背景：＃e0a77777777 18;> <h3>ページ-4 </h3> </div> <div class = pageview style =背景：＃c03ec;> <h3> page -5 </h3> </div> </div>
CSSスタイル：
.viewport：500％;クリックイベント、webkit-transform：translate3d（0,0,0）;
TouchStart、TouchMove、およびTouchEnd Incidentを画面に登録します。CSS3変換を使用して、リアルタイムで表示されます。 、0）viewport（100％、0,0）。ここでは、translate3Dを使用してモバイルGPUを積極的に開き、ページスライドがスムーズになります。
2。主な思考画面上の指から、スライド操作、および画面を離れることは、完全な操作プロセスです。
画面に指を置いてください：ontouchstart
画面で指をスワイプ：OntouchMove
フィンガーは画面を去ります：Ontouchend
ページのスライドを完了するには、これらの3つの触れたインシデントをキャプチャする必要があります。
OntouchStart：初期化された変数、指の位置を記録し、現在の時間を記録します
/*画面に指を置く*/document.addeventristener（touchstart、function（e）{e.preventdefault（）; var touch = e.touchs [0]; startx = touch.pagex; starty touch.pagey; initialpos = CurrentPosition;OntouchMove：現在の場所を取得し、画面上の移動差デルタックスを計算してから、ページを動かしてください。
/*画面上で指をスワイプすると、ページは指に従って動きます*/document.addeventristener（touchmove、function（e）{e.preventdefault（）; var touch = e.touchs [0]; var deltax = touch = touch .p agex -startx; var deltay.pagey -starty; Math.abs（deltay）{movelength = deltax; 0 &&翻訳> = maxwidth）{// transform.call（翻訳）;これ）、false）;OnTouchEnd：指が画面を離れると、ページが計算されます。どのページが最終的に留まります。まず、Deltat <300msで指の滞在時間を計算します。
高速スライディングの場合は、現在のページを画面の中央にとどまります（現在のページをどれだけスライドさせる必要がありますか）
ゆっくりとスライディングしている場合は、画面上の指のスライディングの距離を判断する必要があります現在のページに
/*指が画面を離れたら、最後に留まる必要があるページを計算します*/document.addeventristener（touchind、function（e）{e.preventdefault（）; var翻訳= 0; // Finger on the deltat = gettime（）-startt; s ease -webkit -transform +PageWidth-Moventyは、境界線の位置を超えています{//スライディング距離が画面の50％未満の場合、前のページに戻ります（math.abs（movelength）/pagewidth <0.5）{translate = atrrentposity-movelength;翻訳== currentposition+movelength+pagewidth-movelents;画面上でthis.transform.call（viewport、translate）;}}、false）。さらに、現在のページがページに計算され、現在のページ番号を設定する必要があります
//現在のページ番号pagenow = math.round（math.abs（translate）/pagewidth） + 1;これが表示されます。
もちろん、これらは実際の操作プロセスに詳細があります。 https://github.com/git -onepixel/gesure
上記は、Xiaobianによって導入されたHTML5シングルページスライディングスクリーンの原則の分析です時間。 VEVBウーリンのウェブサイトへのご支援ありがとうございます！