简单封装的web里面的tab点击和swipe滑动的小插件
简单封装的一个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; } }}```
简单封装的web里面的tab点击和swipe滑动的小插件的更多相关文章
- 移动端全屏滑动的小插件，简单，轻便，好用，只有3k swiper,myswiper,page,stage
https://github.com/donglegend/mySwiper mySwiper 移动端全屏滑动的小插件,简单,轻便,好用,只有3k 下载 直接下载 bower install mySw ...
- jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格
td点击后变为input可以输入,更新数据,无刷新更新 演示 XML/HTML Code <table border="0" cellpadding="0" ...
- 简单了解：Web前端攻击方式及防御措施
一.XSS [Cross Site Script]跨站脚本攻击 恶意攻击者往Web页面里插入恶意Script代码,当用户浏览该页之时,嵌入其中Web里面的Script代码会被执行,从而达到恶意攻击用 ...
- ajax实现注册用户名时动态显示用户名是否已经被注册（1、ajax可以实现我们常见的注册用户名动态判断）（2、jquery里面的ajax也是类似我们这样封装了的函数）
ajax实现注册用户名时动态显示用户名是否已经被注册(1.ajax可以实现我们常见的注册用户名动态判断)(2.jquery里面的ajax也是类似我们这样封装了的函数) 一.总结 1.ajax可以实现我 ...
- web自动化框架—BasePage 类的简单封装
优秀的框架都有属于自己的思想,在搭建web自动化测试框架时,我们通常都遵循 PO(Page Object)思想. 简单理解就是我们会把每个页面看成一个对象,一切皆对象,面向对象编码,这样会让我们更好的 ...
- Android AsyncTask 深度理解、简单封装、任务队列分析、自定义线程池
前言:由于最近在做SDK的功能,需要设计线程池.看了很多资料不知道从何开始着手,突然发现了AsyncTask有对线程池的封装,so,就拿它开刀,本文将从AsyncTask的基本用法,到简单的封装,再到 ...
- FMDB简单封装和使用
工具:火狐浏览器+SQLite Manager插件 ; Xcode; FMDB库; 效果: 项目地址: https://github.com/sven713/PackFMDB 主要参考这两篇博客: 1 ...
- nopcommerce里面的@Html.Widget("home_page_top") 是什么？
很多朋友在修改模板的时候看到很多类似@Html.Widget("xxx")的东西,这里简单介绍一下流程: 比如@Html.Widget("home_page_top&qu ...
- iOS开发——UI篇OC篇&UITableView简单封装
UITableView简单封装 UITableView时iOS开发中使用最多也是最重的一个UI空间,其实在App Store里面的%80以上的应用都用到了这个控件,所以就给大家介绍一下,前面的文章中也 ...
随机推荐
- 函数声明后面的const用法
void function() const{} 通常我们会看到一些函数声明后面会跟着一个const,这个const是做什么的呢? 看一下下面的例子,就知道了.直接在编译前,就会提示下面的两个错误 // ...
- echarts图标legend全选功能添加
平时做图表的时候经常用echarts,确实是一款很好用的插件. 开发中遇到了一个问题,在展示的曲线,也就是legend很多的时候,不太好只展示其中几条.配置中是可以默认设置初始化是否展示,但不适用于全 ...
- Angular2入门-架构总览
▓▓▓▓▓▓ 大致介绍 在3月23日,Angular4正式发布(没有3).似乎现在学Angular2又晚了,又晚一步-_-||.Angular2在Angular1的基础上有了较大的改变.之前向一个同学 ...
- Warning: Call to 'toArray()' with pre-sized array argument 'new String[list.size()]'
当使用如下代码将List转换为Array类型时: List<String> list = new ArrayList<>(); String[] array = list.to ...
- SURF特征识别
如果对Surf的探究或者使用到此为止,我觉得只是用Surf这把牛刀吓唬了一个小鸡仔,万里长征才刚刚开始第一步,最少有三个问题需要得到解答: 1. 保存特征点信息的keyPoints向量内每个元素包含有 ...
- kuangbin专题十六 KMP&&扩展KMP HDU2087 剪花布条
一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条,计算一下能从花布条中尽可能剪出几块小饰条来呢? Input输入中含有一些数据,分别是成对出现的花布条和小 ...
- pytorch实现squeezenet
squeezenet是16年发布的一款轻量级网络模型,模型很小,只有4.8M,可用于移动设备,嵌入式设备. 关于squeezenet的原理可自行阅读论文或查找博客,这里主要解读下pytorch对squ ...
- SwiftMailer 发送邮件时 提示fsockopen() 被禁用
站点转移空间,发送邮件的SwiftMailer 类提示错误如下: Warning: fsockopen() has been disabled for security reasons in D:\1 ...
- 那些年坑爹的JS题目
真是让人疑惑的基础.又是一堆奇怪的题目. 题目一. 应该是关于作用域的 function test(n) { this.x = n; return this; } var x = test(1); v ...
- Unity 动画系统 Animation和Animator等常用类