页面PC端 / 移动端整屏纵向翻页,点击/触摸滑动效果功能代码非插件
页面翻页,滑动功能示范代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scale=no, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pic_Test</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#pages-wrap {
width: 100%;
height: 100%;
overflow: hidden;
}
.pages-content {
margin: 0 auto;
height: 100%;
background: rgba(7, 17, 27, 0.4);
}
.pages {
height: 25%;
text-align: center;
font-size: 30px;
color: #FFF;
}
.p1 {
background: rgba(7, 17, 27, 0.2);
}
.p2 {
background: rgba(174, 238, 238, 0.2);
}
.p3 {
background: rgba(238, 162, 173, 0.2);
}
.p4 {
background: rgba(152, 251, 152, 0.2);
}
@media screen and (min-width: 1000px) {
.pages-content {
width: 600px;
}
}
</style>
</head>
<body>
<div id="pages-wrap">
<div class="pages-content" style="height: 100%; transform: translate3d(0px, 0px, 0px); transition-duration: 0.3s">
<div class="pages p1">第一页</div>
<div class="pages p2">第二页</div>
<div class="pages p3">第三页</div>
<div class="pages p4">第四页</div>
</div>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// ==========================全局变量/函数==================================
var start_y = 0,
total_distance = 0,
move_y = 0;
var pages_wrap = $("#pages-wrap");
var timer;
var curr_index = 0; // 当前页
var screen_height = $(document).height(); // 当前网页可以浏览区域高度
var wrap = $(".pages-content:last-child");
var pages = $(".pages");
var total = pages.length; // 总页面数
wrap.css("height", total * screen_height + "px") // 修改父容器初始高度
// 下一页
function nextPage() {
curr_index++;
if (curr_index <= total - 1) {
var move_y = -(curr_index * screen_height);
wrap.css("transform", "translate3d(0px," + move_y + "px, 0px)");
} else {
curr_index = total - 1
return
}
}
// 上一页
function prevPage() {
curr_index--;
if (curr_index >= 0) {
var move_y = -(curr_index * screen_height);
wrap.css("transform", "translate3d(0px," + move_y + "px, 0px)");
} else {
curr_index = 0
return
}
}
// 鼠标/手指拖动、翻页功能
function movePage(client) {
var start_time = null,
end_time = null;
var down = client == "pc" ? "mousedown" : "touchstart";
var move = client == "pc" ? "mousemove" : "touchmove";
var up = client == "pc" ? "mouseup" : "touchend";
var obj = client == "pc" ? $(window) : wrap;
obj.on(down, function (e) {
e.preventDefault();
total_distance = 0;
wrap.css("transition-duration", "0s"); // 修改动画时间避免造成拖动延迟不流畅
start_y = client == "pc" ? e.clientY : e.changedTouches[0].clientY;
start_time = new Date().getTime(); // 移动端判断手指停留屏幕开始时间
obj.on(move, function (e) {
e.preventDefault();
var clientY = client == "pc" ? e.clientY : e.changedTouches[0].clientY;
var distance_y = clientY - start_y;
total_distance += distance_y;
var arr = wrap.css("transform").split(",")
var y = user_agent.indexOf('rv') > 0 ? parseInt(arr[13].match(/-?\d+/g)) : parseInt(arr[5].match(/-?\d+/g)); // 利用正则,获取样式内Y轴距离
move_y = y + distance_y;
start_y = clientY; // 修改开始Y轴为当前Y轴坐标,为下一个移动距离做基准
wrap.css("transform", "translate3d(0px," + move_y + "px, 0px)");
});
});
obj.on(up, function (e) {
e.preventDefault();
end_time = new Date().getTime(); // 移动端判断手指停留屏幕结束时间
wrap.css("transition-duration", "0.3s");
wrap.off(move);
if (client == "pc") { obj.off(move); }
function isMovePage() { // 判断上翻、下翻、回弹
if (total_distance < 0 && move_y >= -(screen_height * (total - 1))) {
nextPage();
} else if (total_distance > 0 && move_y < 0) {
prevPage();
} else {
move_y = -(curr_index * screen_height);
wrap.css("transform", "translate3d(0px," + move_y + "px, 0px)");
}
}
if (end_time - start_time <= 200 && Math.abs(total_distance) >= 100) { // 判断鼠标/手指滑动时间和距离,符合要求直接翻页
isMovePage();
} else {
if (Math.abs(total_distance) >= screen_height / 2) {
isMovePage();
} else {
move_y = -(curr_index * screen_height);
wrap.css("transform", "translate3d(0px," + move_y + "px, 0px)"); // 定义移动距离不够,回弹当前页面
}
}
});
}
// 判断打开页面的平台
var user_agent = navigator.userAgent.toLowerCase();
// 判断是否微信浏览器打开
function isWeixn(ua) {
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return true;
} else {
return false;
}
}
// =========================PC端事件===================================
// 判断为windows环境
if (user_agent.indexOf('windows') > 0) {
// PC端滚轮滑动翻页
pages_wrap.on("mousewheel", function (e) {
clearTimeout($.data(this, "timer"));
$.data(this, "timer", setTimeout(function () {
if (e.originalEvent.wheelDelta < 0) {
nextPage();
}
if (e.originalEvent.wheelDelta > 0) {
prevPage();
}
}, 100))
});
// PC端鼠标拖动翻页
wrap.on({ // 利用冒泡,达到鼠标在window对象也可以拖动页面滚动
"mousedown": function () {
wrap.on("mousemove", function () { });
},
"mouseup": function () { }
})
movePage("pc");
}
// ==========================手机端事件==================================
// 判断为移动端
if (user_agent.indexOf("iphone") > 0 || user_agent.indexOf("ipad") > 0 || user_agent.indexOf("ipod") > 0 || user_agent.indexOf("android") > 0) {
movePage("mobile");
if (isWeixn(user_agent)) {
} else {
}
}
</script>
</body>
</html>
页面PC端 / 移动端整屏纵向翻页,点击/触摸滑动效果功能代码非插件的更多相关文章
- 使用scrollpagination实现页面底端自动加载无需翻页功能
当阅读到页面最底端的时候,会自动显示一个"加载中"的功能,并自动从服务器端无刷新的将内容下载到本地浏览器显示. 这样的自动加载功能是如何实现的?jQuery的插件 ScrollPa ...
- 简易数据分析 08 | Web Scraper 翻页——点击「更多按钮」翻页
这是简易数据分析系列的第 8 篇文章. 我们在Web Scraper 翻页--控制链接批量抓取数据一文中,介绍了控制网页链接批量抓取数据的办法. 但是你在预览一些网站时,会发现随着网页的下拉,你需要点 ...
- pc端vue 滚动到底部翻页
html: <div class="list" ref="scrollTopList"> <div class="listsmall ...
- Atitit.列表页面and条件查询的实现最佳实践(2)------翻页 分页 控件的实现java .net php
)------翻页 分页 控件的实现java .net php 1. 关于翻页有关的几大控件::搜索框控件,显示表格控件,翻页器,数据源控件.. 1 2. 翻页的显示格式:: 1 2.1. 通常ui- ...
- 通过js实现整屏滑动+全屏翻页+动画展示+线性图
技术:html+css+jquery+jquery-ui.js+jquery.fullPage.js 概述 本demo主要通过html+css+js实现整屏滑动,全屏翻页并带动画的功能效果,借助于 ...
- turn.js中文API 写一个翻页效果的参数详细解释
$('.flipbook').turn({ width: 922, height: 600, elevation: 50, gradients: true, a ...
- webapp应用--模拟电子书翻页效果
前言: 现在移动互联网发展火热,手机上网的用户越来越多,甚至大有超过pc访问的趋势.所以,用web程序做出仿原生效果的移动应用,也变得越来越流行了.这种程序也就是我们常说的单页应用程序,它也有一个英文 ...
- Android水平(横向)翻页列表,类似水平GridVIew
Android水平(横向)翻页列表,类似于水平方向的GridView,行列自定义,但要翻页切换,考虑加载性能,当Item数据很多时加载和翻页要流畅,翻页时要有动画效果,效果图如下: 实现方式: 1:翻 ...
- vue2.X简单翻页/分页
由于业务需要 公司把后台所有数据一次性给前端,数据过多,所以前端需要做一些分页的处理,比较简单的翻页. html代码 <table class="three_td"> ...
随机推荐
- this指针/常函数、常对象
this指针引入 类中对象的成员变量和成员函数是分开存储的,sizeof(空class) = 1,另外示例中涉及到字节对齐的问题,double本身的字节为8,int为4,由于字节对齐,int也为8,所 ...
- 微信开发SDK支持小程序 ,Jeewx-Api 1.3.1 版本发布
JEEWX-API 是一款JAVA版的微信开发SDK,支持微信公众号.小程序.微信企业号.支付宝生活号SDK和微博SDK.你可以基于她 快速的傻瓜化的进行微信开发.支付窗开发和微博开发. 基于jeew ...
- 渗透测试入门DVWA 环境搭建
DVWA是一款渗透测试的演练系统,在圈子里是很出名的.如果你需要入门,并且找不到合适的靶机,那我就推荐你用DVWA. 我们通常将演练系统称为靶机,下面请跟着我一起搭建DVWA测试环境.如果你有一定的基 ...
- 08_jQuery对象初识(四)each循环、data(非常重要)
each: 不使用for循环答应jQuery对象,使用each: 退出整个each循环: 退出一次each循环: data:
- 安装office2019
win10系统安装office2019 安装文件下载 https://pan.baidu.com/s/1VnqJ-hNwysPKBhdzE3FSww#list/path=%2F&parentP ...
- Linux文件句柄数配置
1.单程序句柄数限制 查看配置的句柄数:ulimit -n cat /etc/security/limits.conf 参考配置: * soft nofile 655360* hard nofile ...
- Java基础知识(多线程和线程池)
新建状态: 一个新产生的线程从新状态开始了它的生命周期.它保持这个状态直到程序 start 这个线程. 运行状态:当一个新状态的线程被 start 以后,线程就变成可运行状态,一个线程在此状态下被认为 ...
- Hyper-V 2016 上安装windows7激活重启后黑屏无法进入系统
激活重启后就出现下图,无法进入系统 出现此种情况是由于win7的开机引导损坏导致的,具体解决办法如下: 1.设置光盘启动 2.关闭系统重新启动进行修复 启动后按住shift+f10进行修复 输入以下命 ...
- [转]深入WPF--Style
Style 用来在类型的不同实例之间共享属性.资源和事件处理程序,您可以将 Style 看作是将一组属性值应用到多个元素的捷径. 这是MSDN上对Style的描述,翻译的还算中规中矩.Style(样式 ...
- 用JSON将一个字典写入到文件,通过loads()将JSON字符串在转换为本来的类型
通过dumps将字典转换为JSON的字符串,存到磁盘里面