JS實現(xiàn)移動端上下滑動一次一屏
更新時間：2021年06月16日 09:10:25 作者：禿頭星人~
這篇文章主要為大家詳細介紹了JS實現(xiàn)移動端上下滑動一次一屏，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)移動端上下滑動一次一屏的具體代碼，供大家參考，具體內(nèi)容如下
功能如下:
- 頭部： 附近、關(guān)注、推薦選項卡的切換
- 左右滑動功能、頭部選項卡跟隨動畫
- 上下滑動劃動一屏，滑動超過頭部刷新
- 雙擊選項卡回到頂部
上代碼：
<!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="childbox">
<div class="child1">
<div class="listview" type="附近">
</div>
</div>
<div class="child2">
<div class="listview" type="關(guān)注">
</div>
</div>
<div class="child3">
<div class="listview" type="推薦">
</div>
</div>
</div>
<div class="nav_box">
<div>附近</div>
<div>關(guān)注</div>
<div class="active_nav">推薦</div>
</div>
</div>
</body>
<script>
//獲取動畫盒子
let childbox = document.querySelector('.childbox')
//獲取屏幕的高度
let viewheight = document.querySelector('#box').offsetHeight
//獲取所有的導(dǎo)航
let childnav = document.querySelector('.nav_box').querySelectorAll('div')
//獲取視頻類型盒子
let viewlist = document.querySelectorAll('.listview')
//導(dǎo)航索引（0,附近,1,關(guān)注，2推薦）
let indextype = 2
//視頻播放的索引(0:附近,1:關(guān)注,2:推薦)[下標(biāo),視頻的數(shù)量,頁碼]
let view_index = {
0: [0, 0, 1],
1: [0, 0, 1],
2: [0, 0, 1]
}
//初始化導(dǎo)航
set_nav_active(indextype)
//導(dǎo)航選中狀態(tài)
function set_nav_active(index) {
//清除選中狀態(tài)
for (let i = 0; i < childnav.length; i++) {
childnav[i].className = ''
}
//給選中的加上值
childnav[index].className = 'active_nav'
//改變盒子位置
childbox.style.left = index * -100 + '%'
}
//給導(dǎo)航加點擊事件
for (let i = 0; i < childnav.length; i++) {
childnav[i].onclick = function () {
//加上過渡動畫
childbox.style.transition = 'all 0.5s'
//改變點擊導(dǎo)航狀態(tài)
indextype = i
set_nav_active(indextype)
}
}
//左右滑動
let box = document.querySelector('#box')
//動畫是否結(jié)束的狀態(tài)
let transition_status = true
//按下
box.onmousedown = function (event) {
//判斷是否可以執(zhí)行動畫
if (!transition_status) {
return
}
//獲取坐標(biāo)值
let startY = event.clientY
let startX = event.clientX
//是否要進判斷
let t_l_type = true
//獲取上下還是左右滑動的狀態(tài)(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: ''
}
//左右over
//上下滑動
//滑動的初始化位置
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) {
//獲取移動時坐標(biāo)
let moveY = event.clientY
let moveX = event.clientX
//加是否要判斷的開關(guān)
if (t_l_type) {
//判斷是左右滑動還是上下
if (Math.abs(moveY - startY) > 5) {
//停止下次判斷
t_l_type = false
//記錄滑動狀態(tài)
move_type = 2
}
if (Math.abs(moveX - startX) > 5) {
//停止下次判斷
t_l_type = false
//記錄滑動狀態(tài)
move_type = 1
}
}
//判斷滑動代碼
if (move_type == 2) {
//下拉需要兩個條件 1 下拉的 2 上沒有東西了
if (view_index[indextype][0] == 0 && moveY - startY > 0) {
console.log('下拉')
//改變動畫狀態(tài)
transition_type = 1
//計算下拉距離
b_top = moveY - startY
//拉動視圖盒子
viewlist[indextype].style.top = b_top + 'px'
return
}
//執(zhí)行上下滑動
//下拉的時候拒絕上下滑動
if (transition_type != 1) {
//改變動畫狀態(tài)
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) {
// 左右的代碼
//改變動畫狀態(tài)
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 = ''
//判斷執(zhí)行動畫
if (transition_type == 1) {
//下拉
//加上動畫
viewlist[indextype].style.transition = 'all .5s';
//判斷拉動的距離判斷是否刷新
if (b_top > 70) {
//執(zhí)行動畫
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';
//判斷執(zhí)行的動畫
if (top_type_view.a) {
//判斷上下切換
if (top_type_view.b == '上') {
//下標(biāo)改變
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 {
//還原現(xiàn)有狀態(tài)
viewlist[indextype].style.top = startTop + 'px'
}
} else if (transition_type == 3) {
//左右
//執(zhí)行判斷是否切換
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'
//調(diào)取切換函數(shù)
set_nav_active(indextype)
}
//還原下次判斷
t_l_type = true
//還原下次狀態(tài)
move_type = 0
//還原動畫狀態(tài)
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')
//更改視頻數(shù)量
if (view_index[index][2] == 1) {
//清除現(xiàn)有內(nèi)容
viewlist[indextype].innerHTML = ''
//記錄視頻數(shù)量
view_index[index][1] = 10
} else {
//累加視頻數(shù)量
view_index[index][1] += 10
}
//index 插入的下標(biāo)
for (let i = 0; i < 10; i++) {
//創(chuàng)建dom
let div = document.createElement('div')
//命名
div.className = 'view_child'
//內(nèi)容
div.innerHTML = `
<div>${type}:${(view_index[index][2] - 1) * 10 + i + 1}</div>
<hr></hr>
<div>頁碼：${view_index[index][2]}</div>
`
//設(shè)置背景顏色
div.style.backgroundColor = autocolor()
//設(shè)置盒子高度
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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在研發(fā)公展公用后臺的時候，用了許多的技巧性的JS，最有代表性就是如下這一例子.2011-01-01
JavaScript使用readAsDataURL讀取圖像文件
這篇文章主要為大家詳細介紹了JavaScript使用readAsDataURL讀取圖像文件的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細介紹了js實現(xiàn)雙色球效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
textarea 控制輸入字符字節(jié)數(shù)(示例代碼)
本篇文章主要是對textarea 控制輸入字符字節(jié)數(shù)的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
后來經(jīng)過自己的測試，發(fā)現(xiàn)將字符轉(zhuǎn)換為十六進制的方法不完善。2011-11-11
javascript實現(xiàn)根據(jù)漢字獲取簡拼
這里給大家分享一個JavaScript實現(xiàn)的根據(jù)漢字可以自動轉(zhuǎn)換簡拼代碼，有需要的朋友可以參考一下，并非本人原創(chuàng)來自網(wǎng)絡(luò)。2016-09-09
這篇文章主要給大家介紹了關(guān)于three.js利用gpu選取物體并計算交點位置的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用three.js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了如何在JavaScript中正確處理變量，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-12-12
這篇文章主要給大家介紹了關(guān)于js解決pdf使用iframe打印報跨域錯誤問題的相關(guān)資料,文中通過代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用js具有一定的參考借鑒價值,需要的朋友可以參考下2024-03-03
看了JavaScript DOM 編程藝術(shù)的Best Practices那章，才知道我們在制作網(wǎng)頁的時候有很多東西需要考慮2013-10-10