js移动端判断上下左右划屏
$(function(){
(function(){
var LSwiperMaker = function(o){
var that = this;
this.config = o;
this.control = false;
this.sPos = {};
this.mPos = {};
this.dire;
// this.config.bind.addEventListener('touchstart', function(){ return that.start(); } ,false);
// 这样不对的,event对象只在事件发生的过程中才有效;
this.config.bind.addEventListener('touchstart', function(e){ return that.start(e); } ,false);
this.config.bind.addEventListener('touchmove', function(e){ return that.move(e); } ,false);
this.config.bind.addEventListener('touchend', function(e){ return that.end(e); } ,false);
};
LSwiperMaker.prototype.start = function(e){
var point = e.touches ? e.touches[0] : e;
this.sPos.x = point.screenX;
this.sPos.y = point.screenY;
};
LSwiperMaker.prototype.move = function(e){
var point = e.touches ? e.touches[0] : e;
this.control = true;
this.mPos.x = point.screenX;
this.mPos.y = point.screenY;
};
LSwiperMaker.prototype.end = function(e){
this.config.dire_h && (!this.control ? this.dire = null : this.mPos.x > this.sPos.x ? this.dire = 'R' : this.dire = 'L');
this.config.dire_h || (!this.control ? this.dire = null : this.mPos.y > this.sPos.y ? this.dire = 'D' : this.dire = 'U');
this.control = false;
this.config.backfn(this);
};
window.LSwiperMaker = LSwiperMaker;
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);// 禁止微信touchmove冲突
}());
for(var i= 1;i<7;i++){
function hd(i){
var a = new LSwiperMaker({
bind:document.getElementById("page"+i+""), // 绑定的DOM对象
dire_h:false, //true 判断左右, false 判断上下
backfn:function(o){ //回调事件
//这里写怎样滑动
}
});
}
hd(i);
}
});
js移动端判断上下左右划屏的更多相关文章
- [原创]zepto打造一款移动端划屏插件
最近忙着将项目内的jquery 2换成zepto 因为不想引用过多的zepto包,所以花了点时间 zepto真的精简了许多,源代码看着真舒服 正好项目内需要一个划屏插件,就用zepto写了一个 逻辑其 ...
- js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结
1.js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结 : http://www.haorooms.com/post/js_pc_iosandmobile 2.Js判断客户端是否为PC还是手 ...
- 基于animate.css动画库的全屏滚动小插件,适用于vue.js(移动端、pc)项目
功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...
- HTML5中判断横屏竖屏
在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏.竖屏来写不同的代码呢. 这里有两种方法: 一:CSS判断横屏竖屏 写在同一个CSS中 1 2 3 4 5 6 @media s ...
- 有了这套flexible.js 移动端自适应方案,你就能在移动端的来去自如, (*^__^*)
flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https ...
- 用JavaScript判断横屏竖屏问题。JavaScript代码如下【转】
/判断手机横竖屏状态: function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert(" ...
- 用JavaScript判断横屏竖屏问题
判断手机横竖屏状态: //判断手机横竖屏状态: function hengshuping() { if(window.orientation == 180 || window.orientation= ...
- JavaScript判断横屏/竖屏
/判断手机横竖屏状态: function hengshuping(){ if(window.orientation==180||window.orientation==0){ ...
- JS前端开发判断是否是手机端并跳转操作(小结)
JS前端开发判断是否是手机端并跳转操作(小结) 这篇文章主要介绍了JS前端开发判断是否是手机端并跳转操作,非常不错,具有参考借鉴价值,需要的朋友可以参考下 常用跳转代码 ? 1 2 3 4 5 6 7 ...
随机推荐
- scull 的内存使用
scull 使用的内存区, 也称为一个设备, 长度可变. 你写的越多, 它增长越多; 通过使用 一个短文件覆盖设备来进行修整. scull 驱动引入 2 个核心函数来管理 Linux 内核中的内存. ...
- BZOJ1096 [ZJOI2007]仓库建设——斜率优化
方程: $\Large f(i)=min(f(j)+\sum\limits_{k=j+1}^{i}(x_i-x_k)*p_k)+c_i$ 显然这样的方程复杂度为$O(n^3)$极限爆炸,所以我们要换一 ...
- 廖雪峰Java11多线程编程-3高级concurrent包-9Fork_Join
线程池可以高效执行大量小任务: Fork/Join线程池可以执行一种特殊的任务: 把一个大任务拆成多个小任务并行执行 Fork/Join是在JDK 1.7引入的 示例:计算一个大数组的和 Fork/J ...
- Python-函数基础(1)
目录 函数定义 什么是函数? 定义函数三种形式 函数定义的特性 函数调用 函数返回值 return的特性: 函数的参数 有参函数 形参 位置形参 默认形参 实参 位置实参 关键字实参 可变长参数 形参 ...
- Django之深入了解视图层
目录 视图层三板斧 HttpResponse render redirect JsonResponse FBV CBV CBV源码 如何给FBV和CBV加装饰器 视图层三板斧 规定视图函数必须有一个返 ...
- IDEA修改git账号密码
wiin10:控制面板-凭据管理器-Windows凭据-普通凭据-git
- js 移动端点击复制字符串
function copyStr(val) { //val 是要复制的字符串 var input = document.createElement("input"); input. ...
- mysql 存中文失败问题
在向数据库存中文时报错: 将中文字段的字符集改为utf8即可: 成功截图:
- 我的服装DRP之即时通讯——为WCF增加UDP绑定(应用篇)
发个牢骚,博客园发博文竟然不能写副标题.这篇既为我的服装DRP系列第二篇,也给为WCF增加UDP绑定系列收个尾.原本我打算记录开发过程中遇到的一些问题和个人见解,不过写到一半发现要写的东西实在太多,有 ...
- 软件-版本控制器-VisualSVN:VisualSVN
ylbtech-软件-版本控制器-VisualSVN:VisualSVN VisualSVN 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 0. https:/ ...