朋友圈常见单页面触屏滑动上下翻屏功能jQuery实现
翻页插件;实现原理,用margin-top来控制页面容器位置来实现上下翻页。margin这属性很好用,可以用来制作侧栏动画滑出菜单(左菜单,右内容,控制两者的margin实现);或者head下滑菜单
(上菜单,下内容,控制两者的margin实现)。
JS代码(jquery.showup.js):
/**
* @Creator: Nelson Kuang/Fast Mover
* @showup 翻页插件;实现原理,用margin-top来控制页面容器位置来实现上下翻页
* @License:The MIT License (MIT)
* @调用方式
$("#container").showup({
startPage: 0,//开始页面
duration:1000//动画持续时间
})
* @Creator: Nelson Kuang/Fast Mover
* @wipe 触屏滑动绑定触发事件
* @License:The MIT License (MIT)
* @调用方式
$("#node").wipe({
upEvent: function(){},//划上事件
downEvent: function(){},//划下事件
rightEvent:function(){},//划右事件
leftEvent:function(){},//划左事件
delay: 500 //事件延时多久执行
});
*/
$.fn.extend({
wipe: function (options) {
var defaults = {//wipe的默认参数配置
leftEvent: '',
rightEvent: '',
upEvent: '',
downEvent: '',
delay: 500
};
var options = $.extend({}, defaults, options);//传入参数与默认参数合并
var line = {//定义滑动线的起点与终点
startX: 0, startY: 0,
endX: 0, endY: 0
},
results = {//定义滑动,左,右,上,下,或者任意
up: false,
down: false,
left: false,
right: false,
any: function () { return results.up || results.down || results.left || results.right; }
},
useMouseEvents = false,//鼠标滑动模式
timer,//绑定的事件延时执行的计时器
startTime = false,//滑动开始时间
endTime = false,//滑动结束时间
_this = $(this); function onTouchStart(e) {
e.preventDefault();//可选项,阻止事件冒泡
startTime = new Date().getTime();
//起点赋值
line.startX = useMouseEvents ? e.pageX : e.originalEvent.touches[0].pageX;//起点赋值
line.startY = useMouseEvents ? e.pageY : e.originalEvent.touches[0].pageY;
_this.on("mousemove", onTouchMove);//绑定鼠标按下并滑动事件并监听滑动位置
_this.one("mouseup", onTouchEnd);//绑定一次鼠标放开的事件,也即结束滑动事件
_this.on("touchmove", onTouchMove);//绑定移动设备的触屏滑动事件并监听滑动位置
}
function onTouchMove(e) {//绑定鼠标或者移动设备的滑动事件并监听滑动位置
line.endX = useMouseEvents ? e.pageX : e.originalEvent.touches[0].pageX;
line.endY = useMouseEvents ? e.pageY : e.originalEvent.touches[0].pageY;
}
function onTouchEnd(e) {//滑动结束事件
e.preventDefault();//可选项,阻止事件冒泡
_this.off("mousemove", onTouchMove);//解除鼠标滑动事件绑定
_this.off("touchmove", onTouchMove);//解除移动设备的触屏滑动事件绑定
endTime = new Date().getTime();
//特殊情况当点击处理并触发点击事件,退出;1,时间太短小于100ms;2滑动距离小于15;3,点击
if (endTime - startTime < 100 || (Math.abs(line.endX - line.startX) < 15 && Math.abs(line.endY - line.startY) < 15) || (line.endX == 0 && line.endY == 0)) {
resetTouch();//重设参数
_this.trigger("click");
return;
}
if (line.endX > line.startX) {//向右滑动
results.left = false;
results.right = true;
}
else if (line.endX > line.startX) {//向左滑动
results.left = true;
results.right = false;
}
if (line.endY < line.startY) {//向上滑动
results.down = false;
results.up = true;
}
else if (line.endY > line.startY) {//向下滑动
results.down = true;
results.up = false;
}
clearTimeout(timer);
timer = setTimeout(function () {//根据滑动方向及相应的传入的函数执行相应的事件
if (results.left && typeof (options.leftEvent) == 'function')
options.leftEvent();
if (results.right && typeof (options.rightEvent) == 'function')
options.rightEvent();
if (results.up && typeof (options.upEvent) == 'function')
options.upEvent();
if (results.down && typeof (options.downEvent) == 'function')
options.downEvent();
resetTouch();
}, options.delay); }
function resetTouch() {//重设参数
line.startX = line.startY = line.endX = line.endY = 0;
results.left = results.down = results.up = results.right = false; }
//函数入口处
if ("ontouchstart" in document.documentElement) {//移动设备入口
_this.on("touchstart", onTouchStart);
_this.on("touchend", onTouchEnd);
}
else {//电脑鼠标操作
useMouseEvents = true;
_this.on("mousedown", onTouchStart);
_this.on("mouseout", onTouchEnd);
}
},
showup: function (options) {
var defaults = {//showup的默认参数配置
startPage: 0,//开始打开的页码数
duration: 1000//动画持续时间
};
var options = $.extend({}, defaults, options);//传入参数与默认参数合并 this.each(function () {
var _this = $(this);
var pageWidth = _this.width(),//页面宽度
pageHeight = _this.height(),//页面高度
pageNumber = _this.children().children().length;//页面数
if (pageNumber < 2) { return; }//如果是0或者1页,直接退出
if (options.startPage > pageNumber - 1) { options.startPage = 0; }//如果传入参数超过页面总数则从0开始
var totalHeight = pageHeight * pageNumber;//所有页面加起来总高度
var endPage = pageNumber - 1,//结束页面
firstPage = 0,//第一页页码为0
lastPage = pageNumber - 1,//最后一页页码
currentPage = options.startPage;//把开始页设为当前页
var _wrapper = _this.children();//获取容器
if (currentPage > 0)//初始化时打开当前页
gotoPage(currentPage);
_this.children().children().each(function (n) {
var _page = $(this);
if (n == options.startPage) {
//页码为开始页时,只需绑定向上翻页事件(控制margin-top使整个wrapper向上移动)
_page.wipe({
upEvent: pageUp
});
}
else if (n == lastPage) {
//页码为最后一页时,只需绑定向下翻页事件(控制margin-top使整个wrapper向下移动)
_page.wipe({
downEvent: pageDown
});
}
else {
//其他情况,绑定向上和向下翻页事件
_page.wipe({
upEvent: pageUp,
downEvent: pageDown
});
} });
function gotoPage(n) {//打开第n页
var margin_top = -(n * pageHeight);
_wrapper.css("marginTop", margin_top + "px");
currentPage = n;
}
function pageDown() {//向下翻页
var margin_top = -(currentPage * pageHeight);
_wrapper.stop(true, true).animate({ marginTop: (margin_top + pageHeight) + "px" }, {
duration: options.duration
});
currentPage--;
}
function pageUp() {//向上翻页
var margin_top = -(currentPage * pageHeight);
_wrapper.stop(true, true).animate({ marginTop: (margin_top - pageHeight) + "px" }, {
duration: options.duration
});
currentPage++;
} });
}
});
Html代码(demo.html):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title></title>
<style>
body, html {
background-color: black;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
border: none;
} #container {
width: 100%;
height: 100%;
overflow: hidden;
} #wrapper {
width: 100%;
height: 100%;
overflow: visible;
} .screen {
width: 100%;
height: 100%;
} .first-screen {
background-color: purple;
} .second-screen {
background-color: silver;
} .third-screen {
background-color: gray;
} .fourth-screen {
background-color: green;
} .fifth-screen {
background-color: yellow;
} .sixth-screen {
background-color: orange;
} .seventh-screen {
background-color: brown;
} #btn-wrapper {
position: fixed;
left: 0px;
bottom: 30px;
width: 100%;
} .btn-up {
width: 20px;
height: 80px;
margin: 0px auto;
background-color: white;
}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div class="screen first-screen">
</div>
<!--Second session--->
<div class="screen second-screen">
</div>
<!--Third session--->
<div class="screen third-screen">
</div>
<!--Fourth session--->
<div class="screen fourth-screen">
</div>
<!--Fifth session--->
<div class="screen fifth-screen">
</div>
<!--Sixth session--->
<div class="screen sixth-screen">
</div>
<!--Seventh session--->
<div class="screen seventh-screen">
</div>
</div>
</div>
<div id="btn-wrapper">
<div class="btn-up"></div>
</div>
<script src="jquery.js"></script>
<script src="jquery.showup.js"></script>
<script>
$(document).ready(function () {
$("#container").showup({
startPage: 2,
duration: 500
});
});
</script>
</body>
</html>
朋友圈常见单页面触屏滑动上下翻屏功能jQuery实现的更多相关文章
- webpack分包:vue单页面解决分包【减少首屏加载时间】--按需加载[路由懒加载]
1.使用webpack中的syntax-dynamic-import 插件 npm install --save-dev babel-plugin-syntax-dynamic-import 2.配置 ...
- JAVA调用微信接口实现页面分享功能(分享到朋友圈显示图片,分享给朋友)
钉钉提供的内网穿透之HTTP穿透:https://www.cnblogs.com/pxblog/p/13862376.html 网页分享到微信中如何显示标题图,如果自定义标题图,描述,显示效果如下 官 ...
- 关于微信聊天与朋友圈如何快速切换 Mark
用微信时,你是否遇到这样的情况.你正刷着朋友圈,享受着各种鸡汤,这时候,你收到一条微信,一看是女王大人,不得不回.你诚恳的回了一条,等了二十秒不见有什么回应,于是就退了出来,进入朋友圈找到那篇没看完的 ...
- python爬虫24 | 搞事情了,用 Appium 爬取你的微信朋友圈。
昨天小帅b看到一些事情不顺眼 有人偷换概念 忍不住就写了一篇反讽 996 的 看不下去了,我支持996,年轻人就该996! 没想到有些人看不懂 这就算了 还来骂我 早些时候关注我的小伙伴应该知道我第一 ...
- 分享:android图片浏览器—类微信朋友圈相片浏览【android代码下载】
今天给大家分享个android图片/相册浏览器,类似微信朋友圈相片浏览,可以左右滑动,可以双击放大,捏拉放大 效果如下:<ignore_js_op> device-2013-09-04-1 ...
- 微信小程序分享至朋友圈的方法
最近研究怎么实现微信小程序分享至朋友圈,对就是朋友圈. 微信小程序目前没有直接提供方法来将小程序分享至朋友圈,不过可以采用曲线救国的方式来达到目的. 方法分两步: 1.通过浏览器将希望分享的东西风向至 ...
- Android之微信开放平台实现分享(分享好友和朋友圈)
开发中分享操作往往经常遇到,而且还是一些比较大型一定的平台,如微信,QQ,微博等.写这篇博客主要是把微信的的分享和相关操作表达一下,分享可以包含:文字,视频,音乐,图片等分享. 分享可以有 分享给好友 ...
- Android微信逆向--实现发朋友圈动态
0x0 前言 最近一直在研究Windows逆向的东西,想着快要把Android给遗忘了.所以就想利用工作之余来研究Android相关的技术,来保持对Android热情.调用微信代码来发送朋友圈动态一直 ...
- H5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
随机推荐
- Python脚本报错AttributeError: ‘module’ object has no attribute’xxx’解决方法
最近在编写Python脚本过程中遇到一个问题比较奇怪:Python脚本完全正常没问题,但执行总报错"AttributeError: 'module' object has no attrib ...
- springmvc @PathVariable("b") double b 丢失精度问题
Spring MVC从3.0开始支持REST,而主要就是通过@PathVariable来处理请求参数和路径的映射.由于考虑到SEO的缘故,很多人喜欢把新闻的名称作为路径中的一部分去处理,这时候中文的名 ...
- C#直接赋值和反射赋值(无GC)的性能比较
using System; using System.Reflection; using System.Diagnostics; using System.Runtime.InteropService ...
- Windows 7 激活时的坑
前段时间,桌面上有两个文件用各种方法删除不了. 然后今天终于进了PE系统,使用DG把这两货干掉了. 重启进入Windows,提示我 不是正版,今天必须激活,桌面变成了一片黑... 打开小马激活工具OE ...
- Dijkstra算法
Dijkstra(迪杰斯特拉)算法是典型的单源最短路径算法,用于计算一个节点到其他所有节点的最短路径.主要特点是以起始点为中心向外层层扩展,直到扩展到终点为止. /*图的邻接矩阵表示*/typedef ...
- Java编程中“为了性能”需做的26件事
1.尽量在合适的场合使用单例 使用单例可以减轻加载的负担,缩短加载的时间,提高加载的效率,但并不是所有地方都适用于单例,简单来说,单例主要适用于以下三个方面: (1)控制资源的使用,通过线程同步来控制 ...
- 回车符(CR)与换行符(LF), '\r'和'\n'的区别
回车”(Carriage Return)和“换行”(Line Feed)这两个概念的来历和区别.在计算机还没有出现之前,有一种叫做电传打字机(Teletype Model 33,Linux/Unix下 ...
- Android实现页面跳转及传递参数的方法
简单的示例 实现的效果是这样的: 第一个页面有一个按钮,一个文本框,点击按钮,将文本框的内容传递到第二个页面,并显示在第二个页面中. 首先是在给按钮添加点击事件 setOnClickListener( ...
- C# 操作office知识点汇总
1. C#操作Word的超详细总结
- js导出表格数据
考虑到浏览器兼容性问题,采用原生js和后台交互下载网页数据 js: var table = $('.table-panel table'); // Header var tdData ="& ...