朋友圈常见单页面触屏滑动上下翻屏功能jQuery实现

朋友圈常见单页面触屏滑动上下翻屏功能jQuery实现
强烈推介IDEA2021.1.3破解激活,IntelliJ IDEA 注册码,2021.1.3IDEA 激活码 

大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说朋友圈常见单页面触屏滑动上下翻屏功能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>

转载于:https://www.cnblogs.com/fastmover/p/4328603.html

本文来源weixin_30595035,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/29680

发表评论