简单零基础学会H5移动端滑动翻页效果
这篇文章教大家如何使用原生js和少量css3动画来实现HTML5的翻页效果,我会尽量讲得细一点,让零基础的同学也能学会这个简单的案例。
先来看下html的布局代码:
index.html
一个div包裹5个div , 相当于5个不同的页面。
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>移动端H5翻页案例</title><script type="text/javascript" src="js/index.js" ></script><script type="text/javascript" src="js/sp.js" ></script><link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body><div class="show"><div class="page">第一页</div><div class="page">第二页</div><div class="page">第三页</div><div class="page">第四页</div><div class="page">第五页</div></div>
</body>
</html>
如果是手机端的话一定要加上第5、6行这两个标签,第五行的标签可以自适配手机的宽高 ,第六行可以使用当前浏览器版本所支持的最高级标准模式渲染。
这是引用的文件, index.js是等下设置翻页的js代码 ,sp.js是适配不同尺寸的js代码(上个文章有教程),index.css就是设置样式和少量css3翻页动画的。
布局效果图:
打开控制台 点击标红框的小手机即可调成移动端查看。
这里默认使用iPhone6//7/8演示。
下面再看看css样式代码:
index.css
*{padding: 0;margin: 0;
}html,body{height: 100%;
}/*大容器*/
.show{width: 23.437rem;height: 100%;overflow: hidden;margin: 0 auto;position: relative;
}.page{width: 23.437rem;height: 100%;overflow: hidden;position: absolute;display: none;font-size: 50px;text-align: center;
}/*设置每一页的背景色*/
.page:nth-child(1){display: block;background-color: pink;
}
.page:nth-child(2){background-color: gold;
}
.page:nth-child(3){background-color: seagreen;
}
.page:nth-child(4){background-color: peachpuff;
}
.page:nth-child(5){background-color:darkgrey;
}.hide{display: none;
}/*设置翻页的动画*/.out_top{animation: out_top .5s linear both;
}
.in_top{animation: in_top .5s linear both;
}
.out_down{animation: out_down .5s linear both;
}
.in_down{animation: in_down .5s linear both;
}/*当前页-->向上翻-->隐藏*/
@keyframes out_top{from{transform: translateY(0%);}to{transform: translateY(-100%);}
}
/*下一页-->向上翻-->显示*/
@keyframes in_top{from{transform: translateY(100%);}to{transform: translateY(0%);}
}
/*当前页-->向下拉-->隐藏*/
@keyframes out_down{from{transform: translateY(0%);}to{transform: translateY(100%);}
}
/*上一页-->向下拉-->显示*/
@keyframes in_down{from{transform: translateY(-100%);}to{transform: translateY(0%);}
}
一定要在包裹页面page的容器里面加上overflow: hidden; 超出画面隐藏,否则页面会乱,还要用定位固定在同一个锚点。
先让每个页面都隐藏起来,利用nth-child()选择器给每个页面设置不同的背景颜色,利于分辨,最后让第一页显示出来。
效果图如下:
最后看一下js代码:
index.js
绝大部分代码我都添加了注释,方便看懂
var pages = document.getElementsByClassName('page');//获取页面的节点集合
var startY,endY,dis = 0; //第一次触碰的焦点 ,最后触碰的焦点 ,滑动距离
var index = 0;//页码//获取第一次触碰屏幕的焦点startY的事件
document.addEventListener('touchstart',function(e){var touch = e.touches[0];startY = touch.pageY;
})//获取最后触摸的焦点endY , 算出滑动屏幕的距离dis的事件
document.addEventListener('touchmove',function(e){var touch = e.touches[0];endY = touch.pageY;dis = startY - endY;
})//滑动事件结束 如果手指滑动距离大于150 并且正向则执行pageTop函数 -->向上滑动翻页
//滑动事件结束 如果手指滑动距离大于150 方向为负则执行pageDown函数 -->向下滑动翻页
//翻页完毕 执行qingling函数 进行数值清零
document.addEventListener('touchend',function(e){if(Math.abs(dis)>150){if(dis>0){pageTop(index);qingling();}else{pageDown(index);qingling();}}
})//向上翻页并添加翻页动画的样式
function pageTop(n){if(n<pages.length-1){n++;index++;// 这个定时器的作用执行此函数一秒后 本页面添加一个隐藏的样式 随后滑走setTimeout(function(){pages[n-1].classList.add('hide');},1000)pages[n-1].classList.add('out_top');pages[n-1].classList.remove('in_top','out_down','in_down');pages[n].classList.add('in_top');pages[n].classList.remove('out_top','out_down','in_down');pages[n].style.display = 'block';}
}//向下翻页并添加翻页动画的样式
function pageDown(n){if(n>0){n--;index--;setTimeout(function(){pages[n+1].classList.add('hide');},1000)pages[n+1].classList.add('out_down');pages[n+1].classList.remove('in_top','out_top','in_down');pages[n].classList.add('in_down');pages[n].classList.remove('out_top','out_down','in_top');}
}//使相关参数清零
function qingling(){startY = 0;endY = 0;dis = 0;
}
touchstart ,touchmove touchend这些都是触碰事件的固定参数,就像onclick这样, addEventListener(‘事件类型’,要执行的函数)
最后的效果:
视频演示
代码不是很多,但是这个案例很实用,大家可以尝试理解背一下,可以直接套用的
等下我会把完整的项目包发上来,大家可以免费下载学习。
点击免费下载完整项目包
简单零基础学会H5移动端滑动翻页效果相关推荐
- 微信小程序实现滑动翻页效果源码附效果图
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 微信小程序实现滑动翻页效果 效果图: 源码: <view class="mainFra ...
- php左右滑动翻页代码,C#_NGUI实现滑动翻页效果实例代码,废话不多说了,直接给大家上 - phpStudy...
NGUI实现滑动翻页效果实例代码 废话不多说了,直接给大家上干货了. 具体代码如下所示: using UnityEngine; using System.Collections; public cla ...
- ViewPager实现滑动翻页效果
实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下: import android.content.Context; import andr ...
- android控件翻书效果,android ViewPager实现滑动翻页效果实例代码
实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下:import android.content.Context;import androi ...
- android 翻书动画效果怎么做,android ViewPager实现滑动翻页效果实例代码
实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下: import android.content.Context; import andr ...
- h5滚动时侧滑出现_HTML5移动端触摸事件以及滑动翻页效果
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- 滑动翻页效果实现和移动端click事件问题
前述 本文很短~ 主要是为了总结和讲述移动端click和js事件机制导致的一个问题. (:咳咳,其实几句话就能写完的还要水一篇文章,不愧是我- 正文 最近做了一个小活动,里面要用到一个效果:滑动翻页. ...
- vue实现上下滑动翻页_基于vue实现上下滑动翻页效果
18年年底的时候,一直在做年度报告的H5页面,因为项目需要,需要实现上下滑动翻页,并且上滑的页面比正常页面的比例要缩小一定比例. 效果类似于http://www.17sucai.com/pins/de ...
- 滑动翻页效果_Flutter实现3D效果,一个字,炫!
老孟的博客地址: http://laomengit.com/ Flutter 中3D效果是通过Transform组件实现的,没有变换效果的实现: class TransformDemo extends ...
最新文章
- phantomjs学习资料
- 返回一个二维整数数组中最大联通子数组的和
- 关于创建主键和索引的关系一个小小測试
- python和javascript哪个好_JavaScript与Python:主要区别
- android 禁用dlsym_Android7.0对dlopen的改变——读取私有.so结果变化
- Opencv--从CalibrateCamera到SolvePnp(一)
- 集群之间数据拷贝distcp性能的调优
- wordpress代码高亮插件coolcode
- 输入字符_你会输入带圈字符吗?
- jfinal中Interceptor拦截器的使用
- linux ascii游戏,linux – Bash ASCII实现
- 怎样在Git码云上上传项目
- php中下载csv文件怎么打开,php – 下载csv文件
- 动画设计的12条基本原理
- 关于电气人奋斗的故事
- 魅族怎么更改html,魅族默认浏览器设置
- 午芯高科“电容式”MEMS高性能数字气压传感器WXP380
- jQuery第三方插件
- IPv4与IPv6区别
- 阿里巴巴矢量图的使用方法详细教程
热门文章
- 有关酸雨,最近淋雨易得皮肤病!!!!!!!!!!!!!!!
- SwiftUI 跨组件数据传递
- 信息发布服务器hp3000,HP ProCurve Switch 3500yl-24G-PWR_手册
- python爬虫教学百度云_python爬虫爬取百度网盘-怎么做一个百度网盘搜索引擎
- 局域网伪造源地址DDoS攻击解决方法(转)
- Dubbo负载均衡的源码流程(2022.5.30)
- 堵住日常操作易泄密的20个漏洞(转)
- 如何删除搜索框中的历史记录?(转)
- 苹果电脑设置不锁屏的方法
- php企业微信付款到零钱,企业付款到零钱功能介绍及常见问题