web学習ノート12-移動端簡易エレベーター効果

2ヶ月前に退職してから短時間休みましたが、最近新しい会社に入社したばかりで、考えている電子商取引のプロジェクトを始めたのも面白いです.前にjqueryは相対的に少なく、基礎も弱く、新しいプロジェクトの中でゆっくり補習していました.この2,3日はちょうどエレベーターの効果があって、小さなdemo、簡易版を書いて、みんながやり始めたばかりの友达に見せてあげました.
ここはいつものようにgithubリンクElevatorとプレビュー図を置いて、直感的な感じがしてこそ興味を持って下を見ることができますが、この偏基礎は、入門したばかりなら見てもいいです.
エレベーターの効果gif
次は正式に私の考えを言って、みんなは良い考えがあればもっと私の交流があって、お互いに勉強して勉強することができます.
ステップ1:metaを設定し、html棚を作成し、jqueryを導入する
まず、ページを作成します.ページは左右の2つの部分に分かれています.上のデータは実際の運用ではバックグラウンドから取得されています.あるいは、ローカルデータです.私はしばらく死んだデータを書いています.左はleftSideで、右はrightSideで、左の各分類は右にこの分類を表す領域があり、内部には相応の内容があります.この内容はrightContentと呼ばれています.内容はすべて動的に追加されているのでhtml部分には少ないコードしかありません.

ステップ2:ラックにcssスタイルを する

       *{
            padding:0;
            margin: 0;
            background-color: #f5f5f9;
            overflow:hidden
        }
        .content{
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: fixed;
        }
        .leftSide{
            float: left;
            width: 30%;
            height: 100%;
            background-color: transparent;
            overflow: auto;
        }
        .rightSide{
            float: left;
            width: 70%;
            height: 100%;
            background-color: #f5f5f9;
            overflow: hidden;
        }

ページ がマウスでスクロールされないように*にoverflow:hiddenを し、ブロック も に します. の は にスライドして できるようにautoに する があります.
ステップ3:メニューを にダイナミックに し、スタイルを する
に さなブロックをたくさん し、 したスタイルを する があるので、まずスタイルを します.

        .leftSide span{
            display: block;
            width: 100%;
            height: 40px;
            background-color: white;
            border-bottom: 1px solid transparent;
        }
        .leftSide span p{
            display: block;
            margin: 0 auto;
            width: 80%;
            height: 100%;
            background-color: transparent;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            color:black;
            border-bottom: 1px solid lightgrey;
        }
        .leftSide .active{
            border-left: 3px solid red;
            background-color: #f5f5f9;
        }
        .rightSide .rightContent{
            width: 100%;
            height: 100%;
            background-color: #f5f5f9;
            overflow: auto;
        }
        .line{
            width: 80%;
            height: 50px;
            background-color: lightgrey;
            margin: 0 auto;
            margin-top: 10px;
            text-align: center;
            line-height: 50px;
        }

と データを に に

    //    
    var list = ['    ','    ','    ','    ','   ','    ','    ','    ','    ','    ','    ','    ','  ','  ','  ','  ','  ','    ','    '];

    //      
    var html = '';
    for(var i = 0;i < list.length;i++){
        if(i == 0){
            html = ''+'
'+list[i]+'
'+'';
        }else{
            html = ''+'
'+list[i]+'
'+'';
        }
        rightContent = '
';
        $("#leftSide").append(html);
        $(".rightSide").append(rightContent);

    }
      //       div
    var fadeDataDiv = '';
    for(var i = 0; i < list.length;i++){
        fadeDataDiv = '
'+'    '+i+'
';
        $(".rightContent").append(fadeDataDiv);
    }

ステップ4: からの の を する
の のdiv の の を し、クリックイベントで する を うことができます.

    //           
    var topData = [];
    for(var j=0;j

ステップ5:クリックイベントの
クリックイベントでは、まずクリックしたスタイルを し、クリックした にスタイルを し、 のメニューから までの を します.

    //        
    function setActive(i){
        $(".leftSide span").removeClass('active');
        $(".leftSide span").eq(i).addClass('active');
        $('.rightSide').animate({scrollTop:topData[i]+'px'});
    }

これで に が し、その で な き けたり、 う き をしたりすることができます. に があるのを たら、 を して してもいいです.