移动端使用 zepto 做一些基于触摸的动画的时候,需要开发一个函数库。

功能:实例化对象以后能够,触发相应的事件,能够返回给我,当前的移动方向和 X 轴 或者 Y 轴 的移动位移。

var TouchDirection = function(e) {
var startThat = {},
moveThat = {}; this.touchStartEven = function(e) { startThat.startX = e.touches[0].pageX;
startThat.startY = e.touches[0].pageY;
this.startThat = startThat; return this;
}; this.touchMoveEven = function(e) {
moveX = e.touches[0].pageX;
moveY = e.touches[0].pageY; tempX = this.startThat.startX - moveX;
tempY = this.startThat.startY - moveY;
absTempX = Math.abs(tempX);
absTempY = Math.abs(tempY);
angleTouch = absTempX / absTempY; if (tempX < 0 && angleTouch >= 1) {
//鼠标右滑动
moveThat.direction = 'right';
moveThat.moveX = absTempX;
this.moveThat = moveThat; return this;
}
if (tempX > 0 && angleTouch >= 1) {
//鼠标左滑动
moveThat.direction = 'left';
moveThat.moveX = absTempX;
this.moveThat = moveThat; return this; }
if (tempY > 0 && angleTouch < 1) {
//上滑
moveThat.direction = 'up';
moveThat.moveY = absTempY;
this.moveThat = moveThat; return this;
} if (tempY < 0 && angleTouch < 1) {
//下滑
moveThat.direction = 'down';
moveThat.moveY = absTempY;
this.moveThat = moveThat; return this;
}
}; this.touchEndEven = function(){
this.startThat = null;
this.moveThat = null;
};
};

使用方法:

var touchResult = new TouchDirection();

var touchStartEv = function(e){
var that = touchResult.touchStartEven(e);
console.log(that.startThat);
}; var touchMoveEv = function(e) {
var that = touchResult.touchMoveEven(e);
console.log(that.moveThat);
}; var touchEndEv = function(e) {
var that = touchResult.touchEndEven(e);
}; $('.test').on('touchstart', touchStartEv);
$('.test').on('touchmove', touchMoveEv);
$('.test').on('touchend', touchEndEv);

测试的运行结果:

实例 demo 地址:点我


如果您觉得对您有帮助,请点击下面的 star 给我一颗星。谢谢啦!

基于 zepto 的触摸函数封装的更多相关文章

  1. 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了 ...

  2. 移动端 transition动画函数的封装(仿Zepto)以及 requestAnimationFrame动画函数封装(仿jQuery)

    移动端 css3 transition 动画 ,requestAnimationFrame 动画  对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...

  3. 基于zepto的H5/移动端tab切换触摸拖动加载更多数据

    以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...

  4. 基于zepto的移动端日期和时间选择控件

    前段时间给大家分享过一个基于jQuery Mobile的移动端日期时间拾取器,大家反应其由于加载过大的插件导致影响调用速度.那么今天我把从网络上搜集到的两个适合移动端应用的日期和时间选择插件分享给大家 ...

  5. 基于zepto的移动端轻量级日期插件

    前言 做过移动Web开发的同学都知道,移动端日期选择是很常见的需求.在PC端,我们有很丰富的选择,比较出名的就有Mobiscroll和jQuery UI Datepicker.个人看来,这些插件存在的 ...

  6. 基于iOS 10、realm封装的下载器

    代码地址如下:http://www.demodashi.com/demo/11653.html 概要 在决定自己封装一个下载器前,我本以为没有那么复杂,可在实际开发过程中困难重重,再加上iOS10和X ...

  7. 基于Zepto移动端下拉加载(刷新),上拉加载插件开发

    写在前面:本人水平有限,有什么分析不到位的还请各路大神指出,谢谢. 这次要写的东西是类似于<今日头条>的效果,下拉加载上啦加载,这次做的效果是简单的模拟,没有多少内容,下面是今日头条的移动 ...

  8. 基于zepto判断mobile的横竖屏状态

    借用jquery mobile中的代码,删除了一些多余的部分,简单的基于zepto的模块 var CheckOrientation = (function(){ var win = $( window ...

  9. 基于zepto的手机焦点图touchstart touchmove

    基于zepto的手机焦点图,查看地址:demo (建议使用手机浏览器查看)代码如下: <!DOCTYPE HTML> <html> <head> <title ...

随机推荐

  1. java_18 Collection接口

    1.Collection接口 Collection 层次结构 中的根接口.Collection 表示一组对象,这些对象也称为 collection 的元素.一些 collection 允许有重复的元素 ...

  2. centos7 下安装pycharm

    CentOS 7环境下Pycharm安装流程记录: 1.准备安装文件: 方法1: 使用内置火狐浏览器访问下载最新格式为tar.gz的压缩包 网址:https://www.jetbrains.com/p ...

  3. mysql自动删除90天前数据

    #coding:utf-8import MySQLdb #方法1直接在Navicat中添加计划任务#DELETE FROM message2 where SEND_TIME < UNIX_TIM ...

  4. dataTables分页实现两个前提

    ., 'desc' ]]}); .数据结构

  5. 主机性能监控之wmi 获取磁盘信息

    标 题: 主机性能监控之wmi 获取磁盘信息作 者: itdef链 接: http://www.cnblogs.com/itdef/p/3990541.html 欢迎转帖 请保持文本完整并注明出处 仅 ...

  6. 使用android访问SQLServer数据库

    1.SQL驱动 下载可以支持android的SQL驱动,下载地址http://sourceforge.net/projects/jtds/files/ 注意只能下载1.2.7版本.android不支持 ...

  7. 【Selenium】【BugList4】执行pip报错:Fatal error in launcher: Unable to create process using '""D:\Program Files\Python36\python.exe"" "D:\Program Files\Python36\Scripts\pip.exe" '

    环境信息: python版本:V3.6.4 安装路径:D:\Program Files\python36 环境变量PATH:D:\Program Files\Python36;D:\Program F ...

  8. kbmmw中向服务器端传递对象的一种简单方式

    运行环境:delphi 10.2+kbmmw 5.6.20 在kbmmw 的老版本中,要向服务器传送一个本地的对象,一般都需要进行一些转换,例如通过序列化的方式. 在新版的kbmmw中这一切都变的很简 ...

  9. VIP之Switch

    Switch II 最大能连接12路输入与12路输出 不能合并数据数 每个输入可以驱动多个输出 每个输出只能被一个输入驱动 当输入没有连接到输出时,可以禁止掉 每个被禁止的输入可以设置成停止或者消耗模 ...

  10. C# 从后台代码同步或异步注册Javascript到页面之RegisterStartupScript和RegisterClientScriptBlock的区别

    下面来讲讲同步注册JS和异步注册JS的区别 同步注册JS:RegisterClientScriptBlock,相当于在 form开始处(紧接 <form runat="server&q ...