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 ...
随机推荐
- C#设计模式(9)——装饰者模式（Decorator Pattern）（转）
一.引言 在软件开发中,我们经常想要对一类对象添加不同的功能,例如要给手机添加贴膜,手机挂件,手机外壳等,如果此时利用继承来实现的话,就需要定义无数的类,如StickerPhone(贴膜是手机类).A ...
- ADB工具的使用
ADB即Android Debug Bridge调试桥,可以用来调试管理Android设备与设备模拟器的状态,比如,在Android设备上运行Shell,在电脑和设备之间互传文件... 那么问题来了. ...
- DataGridView 访问任意行不崩溃
int index= this.dataGridView1.rows.Add(); 先执行这行代码,然后访问任意行,不崩溃, 赋值不存在的行,只是不显示,或者无值. 什么原理呢? 一些其他 priva ...
- 【数据结构】B-Tree, B+Tree, B*树介绍 转
[数据结构]B-Tree, B+Tree, B*树介绍 [摘要] 最近在看Mysql的存储引擎中索引的优化,神马是索引,支持啥索引.全是浮云,目前Mysql的MyISAM和InnoDB都支持B-Tre ...
- springboot之jar包部署步骤
eclipse中: 1.单击整个项目 run as - maven clean - maven install 2.找到项目所在的路径 找到所有的jar包 3.把jar包放到linux对应的文件夹 l ...
- 02：openf-falcon安装
open-falcon其他篇 目录: 1.1 安装open-falcon环境准备 1.2 部署open-falcon后端 1.2.1 agent配置文件 1.2.2 transfer(数据上报) 1. ...
- sql语句修改字段约束为不为空 并为其设置主键
alter table Drc_Project_Review alter column ReviewID uniqueidentifier not nullalter table Drc_Projec ...
- Python将list中的string批量转化成int/float
data = ['] data = map(eval, data) print data 输出:[1, 3.2, 2] 但是在Python3下我们输入: ls=[1,2,3] rs=map(str,l ...
- pandas之时间序列
Pandas中提供了许多用来处理时间格式文本的方法,包括按不同方法生成一个时间序列,修改时间的格式,重采样等等. 按不同的方法生成时间序列 In [7]: import pandas as pd # ...
- 《温故而知新》JAVA基础五
定义:是类和类之间的关系"is a" 弗父类(基类)->子类(派生类) 是一直单继承的关系 好处:子类拥有父类的属性方法(private除外) 语法 class Son ex ...