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 ...
随机推荐
- automapper demo
最近做项目,需要把DataTable中的数据强类型化.于是试用了下比较常用的AutoMapper,通过看代码中附带的Demo与网上的教程,也算能够勉强使用了,现将学习笔记记录如下: namespace ...
- Tomcat增加Context配置不带项目名访问导致启动的时候项目加载两次
eclipse发布web应用至tomcat,默认方式下访问该项目是需要带项目名称的,例http://localhost:8080/myapp/.现在需要改成这样访问http://localhost.修 ...
- Restful API接口调用的方法总结
restful 接口调用的方法 https://www.cnblogs.com/taozhiye/p/6704659.html http://www.jb51.net/article/120589.h ...
- flask重要点
django与flask的区别 django: 大而全的框架,包含了很多组件,例如:ORM.form.ModelForm.session... flask: 轻量级的可扩展强的框架.有丰富的第三方组件 ...
- CentOS6.5系统，mysql数据库的安装
1.查看数据库中已安装的版本: [mdata@bogon ~]$ yum list installed|grep mysqlmysql-libs.x86_64 5.1.71-1.el6 @anacon ...
- 基于ABP模块组件与依赖注入组件的项目插件开发
注意,阅读本文,需要先阅读以下两篇文章,并且对依赖注入有一定的基础. 模块系统:http://www.cnblogs.com/mienreal/p/4537522.html 依赖注入:http://w ...
- EPOCH batchsize
只有在数据很庞大的时候(在机器学习中,几乎任何时候都是),我们才需要使用 epochs,batch size,迭代这些术语,在这种情况下,一次性将数据输入计算机是不可能的.因此,为了解决这个问题,我们 ...
- ES6学习 --函数参数默认值与解构赋值默认值
1. ES6的解构ES6中引入了解构赋值的操作,其作用是:将值从数组Array或属性从对象Object提取到不同的变量中 即分为两种情况:从数组Array中解构,以及从对象Object中解构 ①.从数 ...
- Docker Weave 命令整理
Docker Weave 命令整理 # 查看weave状态 weave status # 查看状态详情 weave status connections # 查看weave相互之间节点建立的关系 we ...
- 内置函数filter()和匿名函数lambda解析
一.内置函数filter filter()函数是 Python 内置的一个高阶函数,filter()函数接收一个函数 f 和一个list,这个函数 f 的作用是对每个元素进行判断,返回由符合条件迭代器 ...