JS實現移動端上下滑動一次一屏

阿新 • • 發佈：2021-06-17

本文例項為大家分享了js實現移動端上下滑動一次一屏的具體程式碼，供大家參考，具體內容如下

功能如下:

頭部：附近、關注、推薦選項卡的切換
左右滑動功能、頭部選項卡跟隨動畫
上下滑動划動一屏，滑動超過頭部重新整理
雙擊選項卡回到頂部

JS實現移動端上下滑動一次一屏

上程式碼：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            -moz-user-select: none;
            /*火狐*/
            -webkit-user-select: none;
            /*webkit瀏覽器*/
            -ms-user-select: none;
            /*IE10*/
            -khtml-user-select: none;
            /*早期瀏覽器*/
            user-select: none;
        }

        #box {
            width: 350px;
            height: 500px;
            margin: 30px auto;
            border-radius: 5px;
            box-shadow: 0px 0px 27px -3px red;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
            overflow: hidden;
            position: relative;
            background-color: #ccc;
        }

        .childbox {
            width: 300%;
            height: 100%;
            display: flex;
            position: absolute;
            top: 0;
            left: 0;
        }

        .childbox>div {
            flex: 1;
            height: 100%;
        }

        .child1 {
            background-color: salmon;
        }

        .child2 {
            background-color: greenyellow;
        }

        .child3 {
            background-color: blueviolet;
        }

        .nav_box {
            position: absolute;
            width: 100%;
            text-align: center;
            line-height: 50px;
        }

        .nav_box div {
            display: inline-block;
            color: #fff;
            margin: 0 5px;
            position: relative;
        }

        .active_nav::before {
            content: '';
            position: absolute;
            background-color: #fff;
            left: 2px;
            bottom: 7px;
            width: 27px;
            height: 2px;
        }

        .childbox>div {
            position: relative;
        }

        .childbox>div .listview {
            width: 100%;
            position: absolute;
        }

        .view_child {
            text-align: center;
            line-height: 200px;
            color: #fff;
            font-size: 25px;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="chilwww.cppcns.com 
dbox">
            <div class="child1">
                <div class="listview" type="附近">

                </div>
            </div>
            <div class="child2">
                <div class="listview" type="關注">

                </div>
            </div>
            <div class="child3">
                <div class="listview" type="推薦">

                </div>
            </div>
        </div>
        <div class="nav_box">
            <div>附近</div>
            <div>關注</div>
            <div class="active_nav">推薦</div>
        </div>
    </div>
</body>
<script>

    //獲取動畫盒子
    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推薦）
    let indextype = 2
    //視訊播放的索引(0:附近,1:關注,2:推薦)[下標,視訊的數量,頁碼]
    let view_index = {
        0: [0,1],1: [0,2: [0,1]
    }
    //初始化導航
    set_nav_active(indextype)
    //導航選中狀態
    function set_nav_active(index) {
        //清除選中狀態
        for (let i = 0; i < childnav.length; i++) {
            childnav[i].className = ''
        }
        //給選中的加上值
        chhttp://www.cppcns.com 
ildnav[index].className = 'active_nav'
        //改變盒子位置
        childbox.style.left = index * -100 + '%'
    }
    //給導航加點選事件
    for (let i = 0; i < childnav.length; i++) {
        childnav[i].onclick = function () {
            //加上過渡動畫
            UTWauchildbox.style.transition = 'all 0.5s'
            //改變點選導航狀態
            indextype = i
            set_nav_active(indextype)
        }
    }
    //左右滑動
    let box = document.querySelector('#box')
    //動畫是否結束的狀態
    let transition_status = true
    //按下
    box.onmousedown = function (event) {
        //判斷是否可以執行動畫
        if (!transition_status) {
            return
        }
        //獲取座標值
        let startY = event.clientY
        let startX = event.clientX
        //是否要進判斷
        let t_l_type = true
        //獲取上下還是左右滑動的狀態(0:不動;1:左右;2:上下)
        let move_type = 0
        //記錄動畫行為(1:下拉,2:上下，3：左右，0：不動)
        let transition_type = 0
        // 左右start
        //清除盒子動畫
        childbox.style.transition = ''
        //獲取盒子left位置
        let startleft = childbox.offsetLeft
        //是否切換滑動
        let type = {
            a: false,b: ''
        }
        //左右o 
程式設計客棧ver
        //上下滑動
        //滑動的初始化位置
        let startTop = viewlist[indextype].offsetTop
        //判斷是否切換
        let top_type_view = {
            a: false,//是否要切換
            b: '',//判斷向上還是向下
        }
        console.log(startTop)
        //上下over
        //下拉重新整理
        //清除動畫
        viewlist[indextype].style.transition = '';
        //記錄下拉距離
        let b_top = 0
        //下拉over
        document.onmousemove = function (event) {
            //獲取移動時座標
            let moveY = event.clientY
            let moveX = event.clientX
            //加是否要判斷的開關
            if (t_l_type) {
                //判斷是左右滑動還是上下
                if (Math.abs(moveY - startY) > 5) {
                    //停止下次判斷
                    t_l_type = false
                    //記錄滑動狀態
                    move_type = 2
                }
                if (Math.abs(moveX - startX) > 5) {
                    //停止下次判斷
                    t_l_type = false
                    //記錄滑動狀態
                    move_type = 1
                }
            }
            //判斷滑動程式碼
            if (move_type == 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'
                    return
                }
                //執行上下滑動
                //下拉的時候拒絕上下滑動
                if (transition_type != 1) {
                    //改變動畫狀態
                    transition_type = 2
                    //移動的位置
                    let moveY = event.clientY
                    //計算上下移動的距離
                    let num = moveY - startY
                    //改變拖拽元素的top值
                    viewlist[indextype].style.top = startTop + num + 'px'
                    //判斷是否要切換
                    if (num > 70) {
                        top_type_view.a = true
                        top_type_view.b = '上'
                    } else if (num < -70) {
                        top_type_view.a = true
                        top_type_view.b = '下'
                    }
                }
            } else if (move_type == 1) {
                // 左右的程式碼
                //改變動畫狀態
                transition_type = 3
                //移動的位置
                let moveX = event.clientX
                //移動的距離
                let num = moveX - startX
                //盒子需要的left值
                childbox.style.left = startleft + num + 'px'
                //滑動的方向
                if (moveX > startX) {
                    if (num > 100) {
                        type.a = true
                        type.b = '右'
                    }
                } else if (moveX < startX) {
                    if (num < -100) {
                        type.a = true
                        type.b = '左'
                    }
                }
                // over
            }

        }
        //抬起
        window.onmouseup = function () {
            //清除滑動事件
            document.onmousemove = ''
            //判斷執行動畫
            if (transition_type == 1) {
                //下拉
                //加上動畫
  http://www.cppcns.com              viewlist[indextype].style.transition = 'all .5s';
                //判斷拉動的距離判斷是否重新整理
                if (b_top > 70) {
                    //執行動畫
                    transition_status = false
                    viewlist[indextype].style.top = '70px'
                    setTimeout(function () {
                        viewlist[indextype].style.top = '0px'
                        //從第一頁開始
                        view_index[indextype][2] = 1
                        autoview(indextype)
                        //還原動畫
                        setTimeout(() => {
                            transition_status = true
                        },500);
                    },2000)
                } else {
                    viewlist[indextype].style.top = '0px'
                }
            } else if (transition_type == 2) {
                //上下
                //加上過渡動畫
                viewlist[indextype].style.transition = 'all .5s';
                //判斷執行的動畫
                if (top_type_view.a) {
                    //判斷上下切換
                    if (top_type_view.b == '上') {
                        //下標改變
                        view_index[indextype][0]--
                        if (view_index[indextype][0] <= -1) {
                            view_index[indextype][0] = 0
                        }
                        viewlist[indextype].style.top = view_index[indextype][0] * -viewheight + 'px'
                        console.log('上')
                    } else if (top_type_view.b == '下') {
                        view_index[indextype][0]++
                        if (view_index[indextype][0] >= view_index[indextype][1] - 2) {
                            //生成新的視訊
                            autoview(indextype)
                        }
                        viewlist[indextype].style.top = view_index[indextype][0] * -viewheight + 'px'
                    }
                } else {
                    //還原現有狀態
                    viewlist[indextype].style.top = startTop + 'px'
                }
            } else if (transition_type == 3) {
                //左右
                //執行判斷是否切換
                if (type.a) {
                    if (type.b === '左') {
                        indextype++
                        if (indextype >= 3) {
                            indextype = 2
                        }
                    } else if (type.b === '右') {
                        indextype--
                        if (indextype <= -1) {
                            indextype = 0
                        }
                    }
                }
                //加上過渡
                childbox.style.transition = 'all 0.5s'
                //調取切換函式
                set_nav_active(indextype)
            }
            //還原下次判斷
            t_l_type = true
            //還原下次狀態
            move_type = 0
            //還原動畫狀態
            transition_type = 0
        }
    }


    //隨機背景顏色
    function autocolor() {
        return `rgb(${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)})`
    }
    //預設生成視訊列表
    for (let i = 0; i < viewlist.length; i++) {
        autoview(i)
    }
    //生成視訊列表
    function autoview(index) {
        //獲取視訊型別
        let type = viewlist[index].getAttribute('type')
        //更改視訊數量
        if (view_index[index][2] == 1) {
            //清除現有內容
            viewlist[indextype].innerHTML = ''
            //記錄視訊數量
            view_index[index][1] = 10
        } else {
            //累加視訊數量
            view_index[index][1] += 10
        }
        //index 插入的下標
        for (let i = 0; i < 10; i++) {
            //建立dom
            let div = document.createElement('div')
            //命名
            div.className = 'view_child'
            //內容
            div.innerHTML = `
            <div>${type}:${(view_index[index][2] - 1) * 10 + i + 1}</div>
            <hr></hr>
            <div>頁碼：${view_index[index][2]}</div>
        `
            //設定背景顏色
            div.style.backgroundColor = autocolor()
            //設定盒子高度
            div.style.height = viewheight + 'px'
            //追加
            viewlist[index].appendChild(div)
        }
        //更改下次頁碼
        view_index[index][2]++
        console.log(view_index)
    }

    //雙擊置頂
    let nav_box = document.querySelector('.nav_box')
    nav_box.ondblclick = function () {
        viewlist[indextype].style.transition = 'all .5s'
        viewlist[indextype].style.top = '0px'
        view_index[indextype][0] = 0
    }
</script>

</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

JS實現移動端上下滑動一次一屏

本文例項為大家分享了js實現移動端上下滑動一次一屏的具體程式碼，供大家參考，具體內容如下

js實現移動端輪播圖滑動切換

本文例項為大家分享了js實現移動端輪播圖滑動切換的具體程式碼，供大家參考，具體內容如下

js實現移動端吸頂效果

今天來簡單的寫一個吸頂，供大家參考，具體內容如下先羅列一下吸頂需要使用到的屬性

flexible.js實現移動端rem適配方案

需要了解的基礎知識：物理畫素：物理畫素又被稱為裝置畫素，他是顯示裝置中一個最微小的物理部件。每個畫素可以根據作業系統設定自己的顏色和亮度。正是這些裝置畫素的微小距離欺騙了我們肉眼看到的影象效果。

JS實現移動端可摺疊導航選單（現代都市風）

效果圖 1.html部分 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

js實現移動端圖片滑塊驗證功能

之前寫過一篇uniapp框架的滑塊驗證，今天抽個空用原生js實現這個功能，pc端暫時不做，因為pc端只要把touch事件改成mouse事件就能實現，這裡就不再重複寫了。

純css實現移動端左右滑動（隱藏滾動條）【轉載 https://www.cnblogs.com/fanqiuzhuji/p/12626919.html】

/*方法一*/.nav_mine {padding: 15px 20px;border-bottom: 1px solid #aca9a7;height: 75px;display: flex;align-items: center;overflow-y: hidden;flex-wrap: nowrap;/*overflow-x: hidden*/}.nav_mine .nav_ite