简单封装的一个web的手势，tab和swipe，里面的具体数值都是自定义上去的，没有实际的标准，可以自行去修改都行 前两个是详解，js插件在最后一部分代码 ``` //封装web的tab步骤详解 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 标准理想视口 --> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>tab单击事件封装</title> <style> div { width: 200px; height: 200px; background-color: #0a0; margin: 100px auto; } </style> </head> <body> <div></div> </body> </html> <script> // 封装web的单击tab事件。详解 // 0 接触到的事件是touchstart 和 touchend // 1 首先，点击到松开的时间不能过长，300ms左右 // 2 点击的时候，移动距离不能大于5px // 获取元素 var div = document.querySelector('div'); // 定义变量去接收时间和开始的xy位置 var startTime, startX, startY; // 按下事件 div.addEventListener('touchstart', function (e) { // 判断手指的个数 if(e.touches.length>1){ return; } // 获取按下的时间 startTime = Date.now(); // 获取到按下的视口位置 startX = e.touches[0].clientX; startY = e.touches[0].clientY; }) // 离开事件 div.addEventListener("touchend", function (e) { // 判断手指的个数 if(e.changedTouches.length>1){ return; } // 获取离开时候的时间 var endTime = Date.now(); // 判断，先判断时间 if (endTime - startTime > 300) { return; } // 获取离开时候的位置 var endX = e.changedTouches[0].clientX; var endY = e.changedTouches[0].clientY; // 判断位置 if (Math.abs(endX - startX) > 5 || Math.abs(endY - startY) > 5) { return; } console.log("我被点击了") }) </script> `````` <script> // 封装swipe函数的详解 // 0 涉及到事件 touchstart和 touchend // 1 滑动的时候，时间不能过长 大约800ms // 2 滑动的时候，距离必须大于5px // 先判断距离，然后判断滑动的方向 // X轴 结束方向大于开始方向，right，反之left // Y轴 结束方向大于开始方向，down，反之up // 获取dom元素 div = document.querySelector('div'); // 定义变量接受开始的时间和位置 var startTime, startX, startY; // 按下事件 div.addEventListener("touchstart", function (e) { // 判断手指个数 if(e.touches.length>1){ return; } // 获取按下的时间 startTime = Date.now(); // 获取按下的位置 startX = e.touches[0].clientX; startY = e.touches[0].clientY; }) // 离开事件 div.addEventListener("touchend", function (e) { // 判断手指个数 if(e.changedTouches.length>1){ return; } // 获取离开时候的时间 var endTime = Date.now(); // 判断时间 if(endTime - startTime > 800){ return; } // 获取离开时候的位置 var endX = e.changedTouches[0].clientX; var endY = e.changedTouches[0].clientY; // 定义变量接受方向 var direction; // 先判断距离 if(Math.abs(endX-startX)>5){ direction = endX>startX? "right":"left"; } if(Math.abs(endY-startY)>5){ direction = endY>startY? "down":"up"; } console.log(direction); }) </script> ```
最后封装成的插件js： ``` // 简单封装的移动web的tab和swipe插件 //函数名为 webM，可自行修改； function webM(selector) { // 获取dom元素 var dom = document.querySelector(selector); return { tab: function (cb) { // 封装web的单击tab事件。详解 // 0 接触到的事件是touchstart 和 touchend // 1 首先，点击到松开的时间不能过长，300ms左右 // 2 点击的时候，移动距离不能大于5px // 获取元素 var div = document.querySelector('div'); // 定义变量去接收时间和开始的xy位置 var startTime, startX, startY; // 按下事件 div.addEventListener('touchstart', function (e) { // 判断手指的个数 if(e.touches.length>1){ return; } // 获取按下的时间 startTime = Date.now(); // 获取到按下的视口位置 startX = e.touches[0].clientX; startY = e.touches[0].clientY; }) // 离开事件 div.addEventListener("touchend", function (e) { // 判断手指的个数 if(e.changedTouches.length>1){ return; } // 获取离开时候的时间 var endTime = Date.now(); // 判断，先判断时间 if (endTime - startTime > 300) { return; } // 获取离开时候的位置 var endX = e.changedTouches[0].clientX; var endY = e.changedTouches[0].clientY; // 判断位置 if (Math.abs(endX - startX) > 5 || Math.abs(endY - startY) > 5) { return; } cb(); }) return this; }, swipe: function (cb) { // 封装swipe函数的详解 // 0 涉及到事件 touchstart和 touchend // 1 滑动的时候，时间不能过长 大约800ms // 2 滑动的时候，距离必须大于5px // 先判断距离，然后判断滑动的方向 // X轴 结束方向大于开始方向，right，反之left // Y轴 结束方向大于开始方向，down，反之up // 获取dom元素 div = document.querySelector('div'); // 定义变量接受开始的时间和位置 var startTime, startX, startY; // 按下事件 div.addEventListener("touchstart", function (e) { // 判断手指个数 if (e.touches.length > 1) { return; } // 获取按下的时间 startTime = Date.now(); // 获取按下的位置 startX = e.touches[0].clientX; startY = e.touches[0].clientY; }) // 离开事件 div.addEventListener("touchend", function (e) { // 判断手指个数 if (e.changedTouches.length > 1) { return; } // 获取离开时候的时间 var endTime = Date.now(); // 判断时间 if (endTime - startTime > 800) { return; } // 获取离开时候的位置 var endX = e.changedTouches[0].clientX; var endY = e.changedTouches[0].clientY; // 定义变量接受方向 var direction; // 先判断距离 if (Math.abs(endX - startX) > 5) { direction = endX > startX ? "right" : "left"; } if (Math.abs(endY - startY) > 5) { direction = endY > startY ? "down" : "up"; } cb(direction); }) return this; } } } ```
简单封装的一个web的手势，tab和swipe，里面的具体数值都是自定义上去的，没有实际的标准，可以自行去修改都行前两个是详解，js插件在最后一部分代码```//封装web的tab步骤详解<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- 标准理想视口 --> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>tab单击事件封装</title> <style> div { width: 200px; height: 200px; background-color: #0a0; margin: 100px auto; } </style></head><body> <div></div></body></html><script> // 封装web的单击tab事件。详解 // 0 接触到的事件是touchstart 和 touchend // 1 首先，点击到松开的时间不能过长，300ms左右 // 2 点击的时候，移动距离不能大于5px // 获取元素 var div = document.querySelector('div'); // 定义变量去接收时间和开始的xy位置 var startTime, startX, startY; // 按下事件 div.addEventListener('touchstart', function (e) { // 判断手指的个数 if(e.touches.length>1){ return; } // 获取按下的时间 startTime = Date.now(); // 获取到按下的视口位置 startX = e.touches[0].clientX; startY = e.touches[0].clientY; }) // 离开事件 div.addEventListener("touchend", function (e) { // 判断手指的个数 if(e.changedTouches.length>1){ return; } // 获取离开时候的时间 var endTime = Date.now(); // 判断，先判断时间 if (endTime - startTime > 300) { return; } // 获取离开时候的位置 var endX = e.changedTouches[0].clientX; var endY = e.changedTouches[0].clientY; // 判断位置 if (Math.abs(endX - startX) > 5 || Math.abs(endY - startY) > 5) { return; } console.log("我被点击了") })</script>``````<script> // 封装swipe函数的详解 // 0 涉及到事件 touchstart和 touchend // 1 滑动的时候，时间不能过长 大约800ms // 2 滑动的时候，距离必须大于5px // 先判断距离，然后判断滑动的方向 // X轴 结束方向大于开始方向，right，反之left // Y轴 结束方向大于开始方向，down，反之up // 获取dom元素 div = document.querySelector('div'); // 定义变量接受开始的时间和位置 var startTime, startX, startY; // 按下事件 div.addEventListener("touchstart", function (e) { // 判断手指个数 if(e.touches.length>1){ return; } // 获取按下的时间 startTime = Date.now(); // 获取按下的位置 startX = e.touches[0].clientX; startY = e.touches[0].clientY; }) // 离开事件 div.addEventListener("touchend", function (e) { // 判断手指个数 if(e.changedTouches.length>1){ return; } // 获取离开时候的时间 var endTime = Date.now(); // 判断时间 if(endTime - startTime > 800){ return; } // 获取离开时候的位置 var endX = e.changedTouches[0].clientX; var endY = e.changedTouches[0].clientY; // 定义变量接受方向 var direction; // 先判断距离 if(Math.abs(endX-startX)>5){ direction = endX>startX? "right":"left"; } if(Math.abs(endY-startY)>5){ direction = endY>startY? "down":"up"; } console.log(direction); })</script>```最后封装成的插件js：```// 简单封装的移动web的tab和swipe插件//函数名为 webM，可自行修改；function webM(selector) { // 获取dom元素 var dom = document.querySelector(selector); return { tab: function (cb) { // 封装web的单击tab事件。详解 // 0 接触到的事件是touchstart 和 touchend // 1 首先，点击到松开的时间不能过长，300ms左右 // 2 点击的时候，移动距离不能大于5px // 获取元素 var div = document.querySelector('div'); // 定义变量去接收时间和开始的xy位置 var startTime, startX, startY; // 按下事件 div.addEventListener('touchstart', function (e) { // 判断手指的个数 if(e.touches.length>1){ return; } // 获取按下的时间 startTime = Date.now(); // 获取到按下的视口位置 startX = e.touches[0].clientX; startY = e.touches[0].clientY; }) // 离开事件 div.addEventListener("touchend", function (e) { // 判断手指的个数 if(e.changedTouches.length>1){ return; } // 获取离开时候的时间 var endTime = Date.now(); // 判断，先判断时间 if (endTime - startTime > 300) { return; } // 获取离开时候的位置 var endX = e.changedTouches[0].clientX; var endY = e.changedTouches[0].clientY; // 判断位置 if (Math.abs(endX - startX) > 5 || Math.abs(endY - startY) > 5) { return; } cb(); }) return this; }, swipe: function (cb) { // 封装swipe函数的详解 // 0 涉及到事件 touchstart和 touchend // 1 滑动的时候，时间不能过长 大约800ms // 2 滑动的时候，距离必须大于5px // 先判断距离，然后判断滑动的方向 // X轴 结束方向大于开始方向，right，反之left // Y轴 结束方向大于开始方向，down，反之up // 获取dom元素 div = document.querySelector('div'); // 定义变量接受开始的时间和位置 var startTime, startX, startY; // 按下事件 div.addEventListener("touchstart", function (e) { // 判断手指个数 if (e.touches.length > 1) { return; } // 获取按下的时间 startTime = Date.now(); // 获取按下的位置 startX = e.touches[0].clientX; startY = e.touches[0].clientY; }) // 离开事件 div.addEventListener("touchend", function (e) { // 判断手指个数 if (e.changedTouches.length > 1) { return; } // 获取离开时候的时间 var endTime = Date.now(); // 判断时间 if (endTime - startTime > 800) { return; } // 获取离开时候的位置 var endX = e.changedTouches[0].clientX; var endY = e.changedTouches[0].clientY; // 定义变量接受方向 var direction; // 先判断距离 if (Math.abs(endX - startX) > 5) { direction = endX > startX ? "right" : "left"; } if (Math.abs(endY - startY) > 5) { direction = endY > startY ? "down" : "up"; } cb(direction); }) return this; } }}```