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="childbox">
<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, 0, 1],
1: [0, 0, 1],
2: [0, 0, 1]
}
//初始化导航
set_nav_active(indextype)
//导航选中状态
function set_nav_active(index) {
//清除选中状态
for (let i = 0; i < childnav.length; i++) {
childnav[i].className = ''
}
//给选中的加上值
childnav[index].className = 'active_nav'
//改变盒子位置
childbox.style.left = index * -100 + '%'
}
//给导航加点击事件
for (let i = 0; i < childnav.length; i++) {
childnav[i].onclick = function () {
//加上过渡动画
childbox.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: ''
}
//左右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) {
//获取移动时坐标
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) {
//下拉
//加上动画
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript实现移动端滑动选择日期功能
本文实例为大家分享了JavaScript实现滑动选择日期的具体代码,供大家参考,具体内容如下 $(page).on('touchmove','#touchMoveTime',function (event) { touchMove(event); }); scrollBarInit(); //初始化 function scrollBarInit() { var defaultValue = 3,maxValue = 30; var myDate = new Date(); var year =
-
js实现移动端导航点击自动滑动效果
本文实例为大家分享了js实现移动端导航点击滑动效果的具体代码,供大家参考,具体内容如下 移动端模拟导航可点击自动滑动 0.1.4. 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围[依赖于iscroll.js]. 废话不多说直接上代码: /* * 移动端模拟导航可点击自动滑动 0.1.4 * Date: 2017-01-11 * by: xiewei * 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围[依赖于iscroll.js] */ (function ($) { $.
-
Swiper.js实现移动端元素左右滑动
swiper.js也是一个很好用的移动端的js库. 需要引入它的css文件和js文件.用法很简单,加入相应的类即可,看一下Demo,很容易看懂. 我的例子如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name="viewport
-
基于JS实现移动端向左滑动出现删除按钮功能
最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮,本来想着直接使用zepto的touch.js插件,因为之前实现相同的功能时用过这个插件,当时还挺好用的,直接使用它的swipeLeft和swipeRight方法即可,可是今天又开始做这个功能时,却发现这两个方法在使用时毫无效果,一点反应都没有.上网查资料,又下载了最新版本的zepto和touch.js,都没有用,也不知为什么?所以就弃用了这个插件. 下面是我后来实现后的代码,其实就是用了原生js的touch事
-
浅谈移动端之js touch事件 手势滑动事件
现分享一篇关于touch的文章,望指教! 原理: 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向. 具体代码如下: $("body").on("touchstart", function(e) { e.preventDefault(); startX = e.
-
js实现移动端tab切换时下划线滑动效果
本篇会放置多种下划线滑动效果,一篇一篇增加,更新中 1.当前 tab 出现下划线的同时,前一个下划线同时消失(出现方向与消失方向保持一致),伴随过渡效果. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>change tab</title> <style> ul { display: flex
-
原生javascript移动端滑动banner效果
本文实例为大家分享了移动端滑动banner效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,
-
js原生实现移动端手指滑动轮播图效果的示例
如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0
-
基于slideout.js实现移动端侧边栏滑动特效
HTML5现在本领太大了,PC端已经无法满足它的胃口了,它将强势攻入移动端,所以移动端中各种特效也得基于HTML5实现,看看我们将要介绍的slideout.js,能帮我们实现怎么样的侧边栏滑动特效呢 先看下运行效果: 一.准备资料 只需要准备slideout.js库即可: https://github.com/Mango/slideout/blob/master/dist/slideout.js 小图标: 二.实现代码 HTML代码: <!doctype html> <html lang
-
JS实现移动端整屏滑动的实例代码
基本思路: 1)检测手指滑动方向:获取手指抬起时的位置,减去手指按下时的位置,得正即为向下滑动了 2)手指抬起后,向对应反向操作改变当前页的位置 具体代码如下: html <div id="wrap"> <div id="page01" class="pages">第一屏</div> <div id="page02" class="pages">第二屏<