清風はあなたを連れて-H 5+CSS 3(5)の移動端のスライド、ジェスチャー、配置を学びます.

5353 ワード
H 5+CSS 3
M-web
  • touchイベントの使用を知る
  • 独立にjdMのロードショーを完成しました.
  • エリアスクロールプラグインの使用を把握する
  • ジェスチャーイベントの原理を知る
  • less運転環境nodeJS
    • をインストールします.
    タッチ事件
    事件に触れる
    イベント
    説明
    touch start
    このイベントは、スクリーンに指を触れたときにトリガされます.
    touchmove
    画面を指でスライドさせるとイベントが発生します.
    タッチパッド
    このイベントは、画面から指を離すとトリガされます.
    touchcancel
    システムがトレース停止(強制終了)すると触発されます.
    タッチポイント集合
    タッチポイント集合
    説明
    タージタッチ
    ターゲット要素のすべての現在のタッチポイントセット
    changed Touches
    ターゲット要素の最新変更のタッチポイントセット
    touches
    ページ上のすべてのタッチポイントの集合
    注意:touchendイベントの時にイベントはchanged touchesのみ記録されます.
    座標グループ
    点座標
    説明
    pageX/pageY
    ページサイズに基づく座標
    clientX/client Y
    ビューサイズによる座標
    screenX/screenY
    スクリーンサイズに基づく座標
    IScroll
    プラグインの紹介
    エリアスクロールプラグインは、移動端のページスクロール効果に対して不一致を示したり、アップロードなどの効果が必要なページをアップデートしたりと、スクロール効果を高速に実現することができます.
    プラグインの使用
    IScrollはクラスで、スクロール機能が必要なエリアごとに初期化します.各ページのiScrollの例の数は、デバイスのCPUとメモリが許容できる範囲内に限定されない.
    できるだけDOM構造の簡潔さを維持する.iScurollはハードウェア合成層を使用しているが、ハードウェアで処理できる要素を制限している.最適なHTML構造は以下の通りです.
    
    
      
        
    • ...
      • 
        
    • ...
      • 
        ...
    
    iScurollはスクロール領域の外層に作用する.上記の例では、UL要素はスクロール可能である.コンテナ要素の最初のサブ要素だけが転がります.他のサブ要素は完全に無視されます.
    基本的なスクリプトを初期化する方法は以下の通りです.
    
    var myScroll = new IScroll('#wrapper');
    最初のパラメータは、スクロール容器要素のDOMセレクタ文字列であっても良いし、スクロールコンテナ要素の参照オブジェクトであっても良い.以下は有効な文法です.
    var wrapper = document.getElementById('wrapper');
var myScroll = new IScroll(wrapper);
    基本的には、要素を直接伝達するか、またはQerySelector文字列を伝えます.したがって、IDの代わりにcss名を使用して、スクロール容器を選択することができます.
    var myScroll = new IScroll('.wrapper');
    なお、iScurollはquerySelectorAllではなく、querySelectorallを使用していますので、iScullは選択された要素の最初の一つにしか作用しません.複数のオブジェクトに対してiScurollを使用する必要がある場合は、自分のサイクル機構を構築する必要があります.
    ジェスチャーイベント
    轻触事件tap
    初期のモバイル端末ページをダブルクリックしてスケーリングできますので、ダブルクリック操作を検出するために、clickの応答時間を延長しました.200-300 msです.
    最初のソリューション:
            /*  tap  （tap     zepto.js   ）*/
        /*1.       click     150ms */
        /*2.     */
        var bindTapEvent = function (dom, callback) {
            var startTime = 0;
            var isMove = false;
            dom.addEventListener('touchstart', function () {
                startTime = Date.now();
            });
            dom.addEventListener('touchmove', function () {
                isMove = true;
            });
            dom.addEventListener('touchend', function (e) {
                if ((Date.now() - startTime) < 150 && !isMove) {
                    callback && callback.call(this, e);
                }
                startTime = 0;
                isMove = false;
            });
        }
    第二の解決策:
    


    /*    dom           jquery $(function(){});*/
    document.addEventListener('DOMContentLoaded', function() {
        /*     */
        FastClick.attach(document.body);
    }, false);
    /*    click      */
    ジェスチャーイベントswipe
    ジェスチャーイベント:スライド、左滑り、右滑り、上滑り、下振れ(swipeは移動端庫zepo.jsで使います)
      
          /*1.           */
        /*2. swipe swipeLeft swipeRight swipeUp swipeDown */
        /*3.            */
        var bindSwipeEvent = function (dom,leftCallback,rightCallback) {
            /*     */
            /*1.     */
            /*2.     50px*/
            var isMove = false;
            var startX = 0;
            var distanceX = 0;
            dom.addEventListener('touchstart',function (e) {
                startX = e.touches[0].clientX;
            });
            dom.addEventListener('touchmove',function (e) {
                isMove = true;
                var moveX = e.touches[0].clientX;
                distanceX = moveX - startX;
            });
            dom.addEventListener('touchend',function (e) {
                /*    */
                if(isMove && Math.abs(distanceX) > 50){
                    if(distanceX > 0){
                        rightCallback && rightCallback.call(this,e);
                    }else{
                        leftCallback && leftCallback.call(this,e);
                    }
                }
                /*    */
                isMove = false;
                startX = 0;
                distanceX = 0;
            });
        }
        bindSwipeEvent(document.querySelector('.box'),function (e) {
            console.log('    ');
        },function (e) {
            console.log('    ');
        });
    分類ページ
    背景のプロパティ
    大きな容器の真ん中に小さな背景図が表示されます.
  • background-origgin
  • 背景平屋の起点
  • デフォルトでは、内側のマージンからフラット
    • を開始します.
  • padding-boxは内側のマージンから並べて
    • を敷きます.
  • border-boxはフレームから平たく
    • です.
  • contentt-boxは、コンテンツから並べて
    • を展開します.
  • background-clip
  • 背景図クロップ
  • デフォルトの裁断方法の枠以外の裁断
  • border-boxフレーム以外の裁断
  • padding-boxの内側の余白以外は裁断されます.
  • content-boxコンテンツ以外の裁断
    • 移動端のよくあるスライド効果を完成し、移動端ジェスチャーイベントの原理を理解し、よくある移動端レイアウトを把握する.
    私はスピリッツで、中国語＜晟世清風＞と申します.乱世の中で清流の風が吹いてほしいです.
    NodeJsのdomain