JSはモバイル端末の画面を1つずつ上下にスライドさせる機能を実装します

この記事では、モバイル端末を一度に1画面ずつ上下にスライドさせるためのJSの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

機能は次のとおりです。

ヘッダー: 近くの場所、フォロー、おすすめのタブを切り替える
左右スライド機能、ヘッドタブはアニメーションに従います
画面を上下にスワイプしてスワイプし、画面の上部をスワイプすると更新されます。
タブをダブルクリックすると先頭に戻ります

上記のコード:

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
            -moz-user-select: なし;
            /* ファイアフォックス */
            -webkit-user-select: なし;
            /*Webkit ブラウザ*/
            -ms-user-select: なし;
            /*IE10*/
            -khtml-ユーザー選択: なし;
            /* 初期のブラウザ */
            ユーザー選択: なし;
        }

        ＃箱 {
            幅: 350ピクセル;
            高さ: 500px;
            マージン: 30px 自動;
            境界線の半径: 5px;
            ボックスの影: 0px 0px 27px -3px 赤;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-境界線の半径: 5px;
            オーバーフロー: 非表示;
            位置: 相対的;
            背景色: #ccc;
        }

        .childbox {
            幅: 300%;
            高さ: 100%;
            ディスプレイ: フレックス;
            位置: 絶対;
            上: 0;
            左: 0;
        }

        .childbox>div {
            フレックス: 1;
            高さ: 100%;
        }

        .child1 {
            背景色: サーモン色;
        }

        .child2 {
            背景色: 緑黄色;
        }

        .child3 {
            背景色: 青紫;
        }

        .nav_box {
            位置: 絶対;
            幅: 100%;
            テキスト配置: 中央;
            行の高さ: 50px;
        }

        .nav_box div {
            表示: インラインブロック;
            色: #fff;
            マージン: 0 5px;
            位置: 相対的;
        }

        .active_nav::before {
            コンテンツ： '';
            位置: 絶対;
            背景色: #fff;
            左: 2px;
            下: 7px;
            幅: 27px;
            高さ: 2px;
        }

        .childbox>div {
            位置: 相対的;
        }

        .childbox>div .listview {
            幅: 100%;
            位置: 絶対;
        }

        .view_child {
            テキスト配置: 中央;
            行の高さ: 200px;
            色: #fff;
            フォントサイズ: 25px;
        }
    </スタイル>
</head>

<本文>
    <div id="ボックス">
        <div class="childbox">
            <div class="child1">
                <div class="listview" type="near">

                </div>
            </div>
            <div class="child2">
                <div class="listview" type="フォロー">

                </div>
            </div>
            <div class="child3">
                <div class="listview" type="recommend">

                </div>
            </div>
        </div>
        <div class="nav_box">
            <div>近く</div>
            <div>フォロー</div>
            <div class="active_nav">推奨事項</div>
        </div>
    </div>
</本文>
<スクリプト>

    //アニメーションボックスを取得します。let childbox = document.querySelector('.childbox')
    //画面の高さを取得する let viewheight = document.querySelector('#box').offsetHeight
    //すべてのナビゲーションを取得します。let childnav = document.querySelector('.nav_box').querySelectorAll('div')
    //ビデオタイプボックスを取得します。let viewlist = document.querySelectorAll('.listview')
    //ナビゲーションインデックス（0、近く、1、注目、2、推奨）
    インデックスタイプ = 2
    //動画再生のインデックス（0: 近く、1: フォロー、2: おすすめ）[下付き文字、動画数、ページ番号]
    view_index = {とする
        0: [0, 0, 1],
        1: [0, 0, 1],
        2: [0, 0, 1]
    }
    //ナビゲーションを初期化する set_nav_active(indextype)
    //ナビゲーション選択状態関数set_nav_active(index) {
        // 選択状態をクリアする for (let i = 0; i < childnav.length; i++) {
            childnav[i].className = ''
        }
        //選択した子に値を追加しますnav[index].className = 'active_nav'
        //ボックスの位置を変更する childbox.style.left = index * -100 + '%'
    }
    //ナビゲーションにクリックイベントを追加します for (let i = 0; i < childnav.length; i++) {
        childnav[i].onclick = 関数 () {
            // 遷移アニメーションを追加 childbox.style.transition = 'all 0.5s'
            //クリックナビゲーションステータスを変更する indextype = i
            set_nav_active(インデックスタイプ)
        }
    }
    // 左右にスライド let box = document.querySelector('#box')
    //アニメーションが終了したかどうか let transition_status = true
    //押す box.onmousedown = function (event) {
        //アニメーションが実行可能かどうかを判定します if (!transition_status) {
            戻る
        }
        //座標値を取得する let startY = event.clientY
        startX = event.clientX とします。
        //判定に進むかどうか let t_l_type = true
        //上下または左右のスライドの状態を取得します (0: 移動なし、1: 左右、2: 上下)
        move_type = 0 とします
        //アニメーションの動作を記録します (1: プルダウン、2: 上下、3: 左右、0: 動きなし)
        transition_type = 0 とします
        // 左と右の開始
        // クリアボックスアニメーション childbox.style.transition = ''
        //ボックスの左の位置を取得します。let startleft = childbox.offsetLeft
        //スライドを切り替えるかどうかlet type = {
            a: 誤り、
            b: ''
        }
        //左と右の上
        // 上下にスライド // スライドの初期化位置 let startTop = viewlist[indextype].offsetTop
        //切り替えるかどうかを判断するlet top_type_view = {
            a: false, // 切り替えるかどうか b: '', // 上または下に切り替えるかどうかを判断}
        console.log(開始トップ)
        //上下
        // 下に引いて更新 // アニメーションをクリア viewlist[indextype].style.transition = '';
        //プルダウン距離を記録する let b_top = 0
        //下に引っ張る
        document.onmousemove = 関数 (イベント) {
            //移動時の座標を取得する let moveY = event.clientY
            moveX = event.clientX とします。
            //スイッチを追加するかどうかを決定するスイッチを追加します if (t_l_type) {
                // 左か右か上か下にスライドするかを判断する if (Math.abs(moveY - startY) > 5) {
                    //次の判定を停止 t_l_type = false
                    // スライディングステータスを記録 move_type = 2
                }
                (Math.abs(moveX - startX) > 5) の場合 {
                    //次の判定を停止 t_l_type = false
                    // スライディングステータスを記録 move_type = 1
                }
            }
            //スライドコードを判断する if (move_type == 2) {
                // プルダウンには 2 つの条件が必要です 1. プルダウンに何もないこと 2 if (view_index[indextype][0] == 0 && moveY - startY > 0) {
                    console.log('プルダウン')
                    //アニメーション状態の変更 transition_type = 1
                    //プルダウン距離を計算する b_top = moveY - startY
                    // ビューボックスをプルします viewlist[indextype].style.top = b_top + 'px'
                    戻る
                }
                // 上下スライドを実行する // 下に引っ張ったときに上下スライドを拒否する if (transition_type != 1) {
                    //アニメーション状態の変更 transition_type = 2
                    // 位置の移動 let moveY = event.clientY
                    //上下に移動する距離を計算します。let num = moveY - startY
                    //ドラッグ要素の上の値を変更する viewlist[indextype].style.top = startTop + num + 'px'
                    //切り替えるかどうかを判断する if (num > 70) {
                        top_type_view.a = 真
                        top_type_view.b = 'トップ'
                    } そうでなければ (数値 < -70) {
                        top_type_view.a = 真
                        top_type_view.b = '下'
                    }
                }
            } そうでない場合 (move_type == 1) {
                // 左と右のコード // アニメーション状態の変更 transition_type = 3
                // 位置の移動 let moveX = event.clientX
                //移動距離 let num = moveX - startX
                //ボックスに必要な左の値 childbox.style.left = startleft + num + 'px'
                //スライド方向 if (moveX > startX) {
                    （数値＞100）の場合{
                        タイプ.a = true
                        type.b = '右'
                    }
                } そうでなければ（移動X < 開始X）{
                    （数値<-100）の場合{
                        タイプ.a = true
                        type.b = '左'
                    }
                }
                // 以上
            }

        }
        // 上げる window.onmouseup = function () {
            //スライドイベントをクリア document.onmousemove = ''
            //実行アニメーションを判断する if (transition_type == 1) {
                //プルダウン//アニメーションを追加 viewlist[indextype].style.transition = 'all .5s';
                // プルの距離を判断してリフレッシュするかどうかを決定します if (b_top > 70) {
                    //アニメーションを実行する transition_status = false
                    ビューリスト[インデックスタイプ].style.top = '70px'
                    setTimeout(関数() {
                        ビューリスト[インデックスタイプ].style.top = '0px'
                        //最初のページから開始 view_index[indextype][2] = 1
                        自動表示(インデックスタイプ)
                        //アニメーションを復元する setTimeout(() => {
                            遷移ステータス = true
                        }, 500);
                    }, 2000)
                } それ以外 {
                    ビューリスト[インデックスタイプ].style.top = '0px'
                }
            } それ以外の場合 (transition_type == 2) {
                // 上下 // 遷移アニメーションを追加 viewlist[indextype].style.transition = 'all .5s';
                //実行するアニメーションを判断する if (top_type_view.a) {
                    //上下の切り替えを判断する if (top_type_view.b == 'up') {
                        // 下付き文字の変更 view_index[indextype][0] --
                        (view_index[インデックスタイプ][0] <= -1) の場合 {
                            view_index[インデックスタイプ][0] = 0
                        }
                        viewlist[インデックスタイプ].style.top = view_index[インデックスタイプ][0] * -viewheight + 'px'
                        コンソールログ('アップ')
                    } そうでない場合 (top_type_view.b == 'down') {
                        view_index[インデックスタイプ][0]++
                        (view_index[インデックスタイプ][0] >= view_index[インデックスタイプ][1] - 2) の場合 {
                            //新しいビデオを生成する autoview(indextype)
                        }
                        viewlist[インデックスタイプ].style.top = view_index[インデックスタイプ][0] * -viewheight + 'px'
                    }
                } それ以外 {
                    //既存の状態を復元する viewlist[indextype].style.top = startTop + 'px'
                }
            } それ以外の場合 (transition_type == 3) {
                //左と右 //切り替えるかどうかを決定するために実行します if (type.a) {
                    type.b === '左'の場合{
                        インデックスタイプ++
                        インデックスタイプ >= 3 の場合 {
                            インデックスタイプ = 2
                        }
                    } そうでない場合 (type.b === 'right') {
                        インデックスタイプ--
                        （インデックスタイプ <= -1）の場合{
                            インデックスタイプ = 0
                        }
                    }
                }
                // トランジションを追加 childbox.style.transition = 'all 0.5s'
                // 切り替え関数 set_nav_active(indextype) を呼び出す
            }
            //次の判定を復元する t_l_type = true
            //次の状態を復元 move_type = 0
            //アニメーション状態を復元 transition_type = 0
        }
    }


    //ランダムな背景色関数 autocolor() {
        `rgb(${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)})` を返します
    }
    //デフォルトでビデオリストを生成します for (let i = 0; i < viewlist.length; i++) {
        オートビュー(i)
    }
    //ビデオリストを生成する function autoview(index) {
        //ビデオタイプを取得します。let type = viewlist[index].getAttribute('type')
        //動画の数を変更する if (view_index[index][2] == 1) {
            // 既存のコンテンツをクリア viewlist[indextype].innerHTML = ''
            //録画ビデオ数 view_index[index][1] = 10
        } それ以外 {
            //動画の数を累積する view_index[index][1] += 10
        }
        // インデックス挿入された添え字 for (let i = 0; i < 10; i++) {
            //DOM を作成
            div = document.createElement('div') とします。
            //名前 div.className = 'view_child'
            //コンテンツ div.innerHTML = `
            <div>${type}:${(view_index[index][2] - 1) * 10 + i + 1}</div>
            <時間></時間>
            <div>ページ番号: ${view_index[index][2]}</div>
        `
            //背景色を設定する div.style.backgroundColor = autocolor()
            //ボックスの高さを設定する div.style.height = viewheight + 'px'
            //viewlist[index].appendChild(div) を追加します
        }
        //次のページ番号を変更する view_index[index][2]++
        コンソール.log(ビューインデックス)
    }

    //ダブルクリックすると上部に固定されます let nav_box = document.querySelector('.nav_box')
    nav_box.ondblclick = 関数 () {
        viewlist[indextype].style.transition = 'すべて .5'
        ビューリスト[インデックスタイプ].style.top = '0px'
        view_index[インデックスタイプ][0] = 0
    }
</スクリプト>

</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: