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 ...
随机推荐
- JS基本事件（小记）
一. 事件的概念种类及作用(一) 概念:通常鼠标或热键的动作我们称之为事件(event),热键引发的一连串程序的动作,称之为事件驱动(event Driver).而对事件进行处理的程序或函 ...
- Unity之配置转换工具
本人写的配置转换工具,可将策划的配置excel文件一键转换为unity的asset文件或lua代码: 转换请注明出处:http://www.cnblogs.com/jietian331/p/86252 ...
- 聊聊return false
最近在做一些关于视频切换的时候.由于是用a标签做的会有默认的跳转.这时候我就想到了,return flase.阻止默认行为,也达到了预期的效果.后来就详细查了查.让我们来看看 “return fals ...
- jQuery图片无缝轮播
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 在网页中运用统计Web Service接口
(2017-02-10 银河统计) 在"统计随机数及临界值Web Service接口"一文中介绍了常用统计分布四类Web Service接口(随机数.分位数.密度函数和累积分布函数 ...
- 复习-css元素定位
css元素定位 <style type="text/css"> body{ margin: 15px; font-family: "Adobe 宋体 Std ...
- web文件上传
文件上传的步骤: 1.目前Java文件上传功能都是依靠Apache组织的commons-io, fileupload两个包来实现的: 2. http://commons.apache.org/下载io ...
- flutter中使用webview
首先要安装一个插件:flutter_webview_plugin dependencies: flutter_webview_plugin: ^0.2.1+2 使用方法: new MaterialAp ...
- [Python]基础教程（1）、介绍及环境搭建
一.Python简介 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言,是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python 是一种解释型语言: 这意味着开 ...
- libcurl返回常见错误码
转载:https://blog.csdn.net/kenkao/article/details/46875571 转载:http://www.cnblogs.com/wainiwann/p/34929 ...