H5-移动端实现滑屏翻页-原生js/jquery
<!DOCTYPE html>
<html lang="en">
<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>触摸滑屏</title>
<style>
html,body,h2 {
margin: 0;
padding: 0;
}
html,body,#wraper,#content {
width: 100%;
height: 100%;
}
#wraper {
overflow: hidden;
}
#content {
transition: all 1s linear;
}
.page {
width: 100%;
height: 100%;
}
#page1 {
background: #f00
}
#page2 {
background: #0f0
}
#page3 {
background: #00f
}
</style>
</head>
<body>
<div id="wraper">
<div id="content">
<div class="page" id="page1">
page1
</div>
<div class="page" id="page2">
page2
</div>
<div class="page" id="page3">
page3
</div>
</div>
</div>
<script>
var page1 = document.getElementById('page1'), //滑动item
page2 = document.getElementById('page2'),
page3 = document.getElementById('page3'),
wraper = document.getElementById('wraper'),
content = document.getElementById('content'); //滑动容器
var itemHeight = wraper.offsetHeight; //滑动item高度
var index = 0; //滑动计数
var moveY, //滑动距离
endY, //滑动停止的Y坐标
startY; //滑动开始的Y坐标
// content.style.height = (itemHeight * 3) + 'px'
// 触摸开始
function boxTouchStart(e) {
console.log(e)
var touch = e.touches[0];
startY = touch.pageY;
endY = content.style.webkitTransform;
if(!endY){
endY = 0;
}else{
endY = parseInt(endY.replace('translateY(',''))
}
} // 触摸结束
function boxTouchEnd(e) {
console.log(e)
}
// 触摸移动
function boxTouchMove(e) {
var touch = e.touches[0];
moveY = touch.pageY - startY;
index = Number(e.target.id.split('page')[1]) //下一页
if(moveY < 0) {
if(index == 3) {
return false;
}
content.style.webkitTransform = 'translateY(-'+(itemHeight*index)+'px)'
}
//上一页
else if(moveY > 0) {
if(index == 1) {
return false;
}
content.style.webkitTransform = 'translateY('+(itemHeight+endY)+'px)'
} }
content.addEventListener('touchstart', boxTouchStart, false )
content.addEventListener('touchmove', boxTouchMove, false)
content.addEventListener('touchend', boxTouchEnd, false) </script>
</body>
</html>
ps: 水平位置同理，将Y换成X即可
2.今天补充第二种滑动效果，这种属于重叠的滑动效果，楼主做微信H5的移动端活动页面，该死的android，由于有input框，使用translateY()这种操作，
软键盘弹出后，会出现白屏，所以做了修改；
<!DOCTYPE html>
<html lang="en">
<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>触摸滑屏</title>
<style>
html,body,h2 {
margin: 0;
padding: 0;
}
html,body,#wraper,#content {
width: 100%;
height: 100%;
}
#wraper {
overflow: hidden;
}
#content {
transition: all 1s linear;
}
.page {
width: 100%;
height: 0;
overflow: hidden;
transition: all 1s linear;
color: #ff0
}
#page1 {
height: 100%;
background: #f00
}
#page2 {
background: #0f0
}
#page3 {
background: #00f
}
/* img {
width: auto;
height: auto;
} */
</style>
</head>
<body>
<div id="wraper">
<div id="content">
<div class="page" id="page1">
page1
<img src="https://dimg04.c-ctrip.com/images/300p0f0000007eqxf6DAD_C_228_132.jpg" alt="" />
</div>
<div class="page" id="page2">
<img src="https://dimg06.c-ctrip.com/images/350d0p000000fekw944EE_R_228_132_Q90.jpg" alt="" />
page2
</div>
<div class="page" id="page3">
<img src="https://dimg04.c-ctrip.com/images/300v0o000000fftlb25BA_C_228_132.jpg" alt="" />
page3
<button class="back">back</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var page1 = document.getElementById('page1'), //滑动item
page2 = document.getElementById('page2'),
page3 = document.getElementById('page3'),
wraper = document.getElementById('wraper'),
content = document.getElementById('content'); //滑动容器
var itemHeight = wraper.offsetHeight; //滑动item高度
var index = 0; //滑动计数
var moveY, //滑动距离
endY, //滑动停止的Y坐标
startY; //滑动开始的Y坐标
// content.style.height = (itemHeight * 3) + 'px'
// 触摸开始
function boxTouchStart(e) {
var touch = e.touches[0];
startY = touch.pageY;
} // 触摸移动
function boxTouchMove(e) {
var touch = e.touches[0];
moveY = touch.pageY - startY;
index = Number(e.target.id.split('page')[1]) //下一页
if(moveY < 0) {
if(index == 3) {
return false;
}
$('#page'+index).css('height', '0px')
$('#page'+(index+1)).css('height', itemHeight+'px')
}
} $('.back').click(function() {
$('#page3').css('height', '0px')
$('#page1').css('height', itemHeight+'px')
})
content.addEventListener('touchstart', boxTouchStart, false )
content.addEventListener('touchmove', boxTouchMove, false) </script>
</body>
</html>
H5-移动端实现滑屏翻页-原生js/jquery的更多相关文章
- H5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
- 通过js实现整屏滑动+全屏翻页+动画展示+线性图
技术:html+css+jquery+jquery-ui.js+jquery.fullPage.js 概述 本demo主要通过html+css+js实现整屏滑动,全屏翻页并带动画的功能效果,借助于 ...
- 移动端ios上下滑动翻页事件失效
移动端开发过程中,在添加上下滑动事件时候,引入了最常用的移动端库zepto.js及其touch模块,有一种现象,安卓的手机没有问题,上下滑动翻页很正常 :但是到了ios上面,好啊,上下滑动会出现弹性滚 ...
- chromedriver 全屏 翻页 错误
from selenium import webdriver from selenium.common.exceptions import TimeoutException, StaleElement ...
- 实现手机端上下左右滑屏的jq原生代码和使用库·两种办法
先来一个原生的.我使用的是jq. 需要注意的地方就是被触发的元素最好不要是body,这个代码也可以修改,如果obj传进来的是body那么,$(this)必须是你的监听元素,不然会冒泡泡,整个项目就…… ...
- 标签页（tab）切换的原生js,jquery和bootstrap实现
概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(ta ...
- 移动端touch滑屏事件
<script> var windowHeight = $(window).height(), $body = $("body");// console.log($(w ...
- 【原创】书本翻页效果booklet jquery插件系列之简介
booklet jquery插件系列之简介 本文由五月雨恋提供,转载请注明出处. 一.安装 1.添加CSS和Javascript 添加booklet CSS文件到你的页面. <link rel= ...
- ajax无刷新翻页后，jquery失效问题的解决
例如 $(".entry-title a").click(function () { 只对第一页有效, 修改为 $(document).on('click', ".e ...
随机推荐
- python set的函数
1. add() 为集合添加元素 2. clear() 移除集合中的所有元素 3. copy() 拷贝一个集合 4. difference() 返回多个集合的差集 5. difference_upda ...
- SpringBoot框架的使用
什么是SpringBoot Spring Boot是Spring社区发布的一个开源项目,旨在帮助开发者快速并且更简单的构建项目.大多数SpringBoot项目只需要很少的配置文件. SpringBoo ...
- Reservoir sampling
在看蚂蚁***的时候看到这道题,真心觉得有趣,所以啊,一定要投入其中,知识的美妙啊~ 小明在天猫上开了一个网店,某天要开展一个抽奖活动,奖品数量100个.为了保证活动的公平,小明希望保证每个顾客中奖概 ...
- netty如何实现零拷贝
根据 Wiki 对 Zero-copy 的定义: "Zero-copy" describes computer operations in which the CPU does n ...
- Mysql模糊查询like效率，以及更高效的写法
在使用msyql进行模糊查询的时候,很自然的会用到like语句,通常情况下,在数据量小的时候,不容易看出查询的效率,但在数据量达到百万级,千万级的时候,查询的效率就很容易显现出来.这个时候查询的效率就 ...
- 4A Watermelon
A. Watermelon time limit per test 1 second memory limit per test 64 megabytes input standard input o ...
- 复习-css控制文本字体属性
css控制文本字体属性 font-family:字体系列,如”serif“”sans-serif“ font-size:尺寸 font-style:字体样式,如“normal,italic(斜体).o ...
- 论文笔记【二】Making Sense of Word Embeddings
摘要 1.作者提出了一种新的简单有效的方法,用于学习词义嵌入word sense embedding 2.传统的两种方法:(1)直接从语料库中学习词义:(2)依赖词汇资源的语义库 研究方法的创新点:通 ...
- 第十节 JS运动中级
链式运动框架. 回调函数 运动停止时,执行函数 运动停止时,开始下一次运动 <!DOCTYPE html> <html lang="en"> <hea ...
- docker容器与大数据组件的冲突点
1.容器里面安装spark,外面的程序(安装spark主机的容器)会连接不上集群.理由:这个组件用的akka,连接上集群,会提示: akka.ErrorMonitor: dropping messag ...