ジェスチャークロスエンド電子ビジネスプラットフォームの効果を達成する（左右スライド）

エンドのモバイル人間とコンピュータの相互作用は、PC側と対話するためにマウスとキーボードを使用して、PC側の性質の変化に伴って発生し、指のタッチやスライドを使用して、エンドを動かします。このようなのMouseEnter（マウスイベントを入力し）、mouseMoveイベント（マウスモーションイベント）のようなメインイベントモニタマウスPC側開発、mouseLeave（左マウスイベント）。最後に、モバイル開始イベントtouch用のイベント、タッチ移動イベントに耳を傾け、そしてイベントの終了をタッチします。この設計では、タブによる製品の詳細ページには、基本的な情報、製品の詳細とレビュー情報を達成するための表示を切り替えます。大きな項目は、指のスライドをスライドさせて表示を制御するために、基本的な情報にスライドして表示しました。図効果移動端ジェスチャー操作：

これは、画面上で指の開始位置を記録し、イベントリスナーのジェスチャーの始まりによって達成されます。指の動きの座標を取得し、指の動きから得られる指マイナス開始位置座標の動きを調整するためにイベントを移動するジェスチャーを聴取。そして、リアルタイムでスライドを移動させる効果を達成するためにスライドの変換の値を変更します。最後にジェスチャー終了イベントリスナ、再び指の移動距離がスライディングよりも大きいかどうか、最終的な決意を最後の位置マイナス指の最終的な動きから得られる指の開始位置を用いて、そのイベントのハンドラにおける指の最終位置を与えるためにスライドスイッチが閾値よりも大きいか、または切り替えていない場合の閾値、本設計は、本明細書に100pxに臨界値を提供しました。
スライドスイッチで特別な場合には左にそして最初にスライドされ、右側にスライドし、第1の右及び左スライド第2のスライドではないため、最終的に、これら2つの操作が無効です絵。どのようにほとんどの最初または最後のいずれかにユーザーフレンドリースライドを伝えるためには、ユーザーエクスペリエンスを強化するための鍵です。主流のアプローチの主要な主流のビジネスプラットフォームは、ユーザのノウハウがほとんど移動させないことができ、有効なケースではない、すなわちスライドにスライドの摺動速度を減らすために、この設計で描画します。ユーザの操作に直接応答がないため、操作の一貫性を維持し、ユーザーを理解し明確に告げながら、このような行為は、最後にスライドしています。
PCの開発中、トップの値を変更するには、絶対位置を使用して、モバイルの要素を達成するために残しました。指がスライドするときトップ値と要素の左側の値を変更し、達成するために、絶対配置を使用する最初の試みでは、状況は、要素ジッタの周囲に表示されます。（3つの移動方向）移動端末が非常に良好であり、HTML5のCSS3のサポートは、移動端末における開発プロセスを安全に変換CSS3スタイルを使用することができるように、値がtranslate3dスタイルであるため、transformX（横移動）、transformY、 （上下移動）、スケール（2Dスケール変換）、回転（回転2D定義される）などが挙げられます。本明細書で使用される要素の位置を変更するtranslate3d。スタイルの変更は絶対に左と上の値は最初のトリガをトリガし、その後再建を再描画が、唯一の変換によってトリガーされる位置変更、復興と再描画をトリガするときのパフォーマンスの差に変換し、絶対位置は、ブラウザによるものですブラウザを再描画します。これにより、ブラウザ、優れたパフォーマンスを変換使用の処理効率を向上させることができます。実際のパフォーマンスでは完全に変換する問題を解決することができます。

HTMLの構造：

                    div.piclist-outer
                            div.piclist-inner
                                each singleBig in gmainImgs
                                    img(src='#{singleBig}' alt='slide img')
                            div.piclist-signal-wrapper
                                ul.piclist-signal
                                    each singleBig in gmainImgs
                                        li

ジェイドを使用しているので、それはトップの形式です。一番外側は.piclist-内部のdivクラスと呼ばれるスライド全体の面積は、複数の画像を包み、これらの写真は、水平方向に並置されたDIV。クラスは、複数の画像の最初の兆候である.piclist信号-ラッパー・パッケージが表示されているという名前。

次に、特定のjsのコードを見て：

// @begin finger js
var slidewrap=document.getElementsByClassName("piclist-outer")[0]
var slideInner= document . getElementsByClassName("piclist-inner")[0]
var page=0
var distanceX=0
var transX=0
var listUl=document.getElementsByClassName("piclist-signal")[0].getElementsByTagName("li")
var listUlLen=listUl.length
//触摸的开始事件的处理函数
function handlestart (e) {
    if(e.touches.length!==1){
        return
    }
    //获取触摸时的横纵坐标
    startX=e.touches[0].pageX
    startY=e.touches[0].pageY
    slidewrap.addEventListener('touchmove',handlemove,false)
    // console.log("sx is: "+ startX+"sy is : " + startY)
}    

//触摸的移动事件处理函数
function handlemove (e) { 
    transX = - page * screenWidth
    // console.log("page:"+(-page * screenWidth))
    slideInner.style.transform="translate3d("+transX+"px,0,0)"
    var touches=e.touches
    if (touches&&touches.length) {
        distanceX=startX-touches[0].pageX
        // console.log("distanceX :"+distanceX)
        // console.log("handlemove"+transX)
        //如果当前是第一张幻灯或者最后一张幻灯，则让滑动速度降为原来的三分之一，已到达提示用户已不可滑动。
        if ((page == 0 && distanceX < 0) || (page == (listUlLen - 1) && distanceX > 0)) {
            distanceX=distanceX / 3
        }
        //通过改变transform属性值来达到移动的效果
        var transX=-distanceX-page * screenWidth
        slideInner.style.transform="translate3d("+transX+"px,0,0)"
    }
    e.preventDefault()
}    

//触摸的结束事件处理函数
function handleend(argument) {
    transX=- page * screenWidth - distanceX
    var move_time =1
    var move_dis=8
    // console.log("move end")
    //如果是第一张幻灯并向左滑动或者最后一张幻灯向右滑动的情况下，在滑动结束时显示原先的幻灯不发生改变
    if ((page == 0 && distanceX < 0) || (page == (listUlLen - 1) && distanceX > 0)) {
        transX=- page * screenWidth
        slideInner.style.transform="translate3d("+transX+"px,0,0)"
        return
    }
    //如果滑动的距离大于100px，则向右切换幻灯片
    if (distanceX>=100) {
        listUl[page].style.background="#e0e0e0"
        page++
        listUl[page].style.background="#c40000"
        //通过定时器实现滑动的动画效果
        var timer=setInterval(function () {
            slideInner.style.transform="translate3d("+transX+"px,0,0)"
            transX-=move_dis
            // console.log("transX:"+transX)
            // console.log("page:"+-page*(screenWidth + 1))
            if (transX <= -page * (screenWidth + 1)) {
                clearInterval(timer)
            }
        },move_time)
    }
    //如果滑动距离小于100px，则向左切换幻灯片
    else if (distanceX<=-100) {
        listUl[page].style.background="#e0e0e0"
        page--
        listUl[page].style.background="#c40000"
        var timer=setInterval(function () {
            slideInner.style.transform="translate3d("+transX+"px,0,0)"
            transX+=move_dis
            // console.log("transX:"+transX)
            // console.log("page:"+-page*(screenWidth + 1))
            if (transX >= -page * (screenWidth + 1)) {
                clearInterval(timer)
            }
        },move_time)
    }
    //如果滑动的距离没有达到临界的距离则不切换
    else{
        transX=- page * screenWidth
        slideInner.style.transform="translate3d("+transX+"px,0,0)"
    }
}

完全なプロジェクトは、私に行くことができます見るGitHubに、ダウンロードし、質問や懸念カザフスタンへの歓迎。