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 ...
随机推荐
- [Android] TextView上同时显示图标和文字
需求场景 +----------------------------+ | Icon TEXT | +----------------------------+ 当然,可以使用LineLayout,包 ...
- JS构造函数原理与原型
1.创建对象有以下几种方式: ①.var obj = {}; ②.var obj = new Object(); ③.自定义构造函数,然后使用构造函数创建对象 [构造函数和普通函数的区别:函数名遵循大 ...
- 校验input 修改当前值的校验获取值方式
<input style="height: 18px; width: 90px;" name="nowQty" value="${ad.nowQ ...
- Python RabbitMQ消息持久化
RabbitMQ消息持久化:就是将队列中的消息永久的存放在队列中. 处理方案: # 在实例化时加入durable=True来确认消息的实例化,客户端服务端都要写 channel.queue_dec ...
- webpack搭建项目时出现的报错“Module build failed (from ./node_modules/css-loader/dist/cjs.js) CssSyntaxError”
控制台出现的错误如下: webpack.config.js中的配置如下: module.exports={ entry:'./src/main.js', output:{ path:__dirname ...
- SublimeText3安装Highlight插件
本来机子上装的是版本3,试了试网上的教程,比如这个:http://qq920924960.blog.163.com/blog/static/221611034201411247318866/ 结果都不 ...
- tp剩余未验证内容-7
bash脚本中 的 set -e表示 exit immediately if a simple command returns a non-zero value.主要是为了防止错误被忽略.会被立即退出 ...
- MyBio小隐本记注册破解
既然开始了,就把这一个系列的都破了算了,这次主角小隐本记MyBio 和WDTP的原理是差不多的,先把软件界面换成e文,然后写了15个记录后提示注册,一样的路子,直接跳过注册窗口的弹出就好了 然后查壳一 ...
- Lintcode423-Valid Parentheses-Easy
思路: 数据结构:stack.遍历整个字符串,如果遇到左向括号( [ { 则入栈.如果遇到右向括号时,先检查栈是否为空,为空说明左右向括号数目不一致,返回false:不为空则弹出栈顶元素查看是否和右向 ...
- tomcat的systemctl启动脚本
最近在做Tomcat的实验,顺便研究了一下tomcat的启动脚本发现一个问题,然后经过多方查阅其他大神的资料,终于解决,现在跟大家分享. tomcat的启动脚本跟别的脚本有稍微区别的原因是他需要识别J ...