$(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移动端判断上下左右划屏的更多相关文章

  1. [原创]zepto打造一款移动端划屏插件

    最近忙着将项目内的jquery 2换成zepto 因为不想引用过多的zepto包,所以花了点时间 zepto真的精简了许多,源代码看着真舒服 正好项目内需要一个划屏插件,就用zepto写了一个 逻辑其 ...

  2. js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结

    1.js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结 : http://www.haorooms.com/post/js_pc_iosandmobile 2.Js判断客户端是否为PC还是手 ...

  3. 基于animate.css动画库的全屏滚动小插件,适用于vue.js(移动端、pc)项目

    功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...

  4. HTML5中判断横屏竖屏

    在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏.竖屏来写不同的代码呢. 这里有两种方法: 一:CSS判断横屏竖屏 写在同一个CSS中 1 2 3 4 5 6 @media s ...

  5. 有了这套flexible.js 移动端自适应方案,你就能在移动端的来去自如, (*^__^*)

    flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https ...

  6. 用JavaScript判断横屏竖屏问题。JavaScript代码如下【转】

    /判断手机横竖屏状态: function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert(" ...

  7. 用JavaScript判断横屏竖屏问题

    判断手机横竖屏状态: //判断手机横竖屏状态: function hengshuping() { if(window.orientation == 180 || window.orientation= ...

  8. JavaScript判断横屏/竖屏

    /判断手机横竖屏状态:  function hengshuping(){    if(window.orientation==180||window.orientation==0){          ...

  9. JS前端开发判断是否是手机端并跳转操作(小结)

    JS前端开发判断是否是手机端并跳转操作(小结) 这篇文章主要介绍了JS前端开发判断是否是手机端并跳转操作,非常不错,具有参考借鉴价值,需要的朋友可以参考下 常用跳转代码 ? 1 2 3 4 5 6 7 ...

随机推荐

  1. Foundation框架系列-NSArray

    NSArray常用API 数组字符串指定字符拼接 // 将数组中的元素以separator拼接返回字符串 比如@[@"a=1", @"b=2"] 以separa ...

  2. pom.xml文件配置maven仓库地址

    中央仓库就是Maven的一个默认的远程仓库,Maven的安装文件中自带了中央仓库的配置($M2_HOME/lib/maven-model-builder.jar) 在很多情况下,默认的中央仓库无法满足 ...

  3. 论一个X倒下了千千万万个X站起来了

        一个人倒下了,千千万万个人站起来了.起源自革命时期的标语.后来又被应用于各种激励的场景.     这句话在当时环境是好的,但是在无数人应用在不同场景,并且这些场景都不怎么好的时候.人的普遍思维 ...

  4. LINQ用法总结

    之前一直用sql和拉姆达表达式,一直感觉linq不好用.用熟练了感觉期功能好强大,查询性能例外考究.这里讲讲基本用法. 内联查询: var list2 = (from a in db.Role whe ...

  5. MQTT入门介绍

    一简述 MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的"轻量级&q ...

  6. 廖雪峰Java13网络编程-2Email编程-2接收Email

    1接收Email协议类型 接收Email:收件人通过MUA软件把邮件从MDA抓取到本地计算机的过程. 1.1 POP3 从MUA到MDA使用最广泛的是协议是POP3 Post Office Proto ...

  7. Django缓存机制以及使用redis缓存数据库

    目录 Django 配置缓存机制 缓存系统工作原理 Django settings 中 默认cache 缓存配置 利用文件系统来缓存 使用Memcache来缓存: 使用Local-memory来缓存: ...

  8. 线性dp——cf1032

    升维来保存第i位按j是否可行,然后枚举i-1个的状态,用5*5n就可以完成递推 /* dp[i][j]==0表示第i步按j不可行 */ #include<bits/stdc++.h> us ...

  9. 19-10-29-Night-X

    布谷. 欢迎大家来不耻下问. 这里是正解不会,暴力写跪,乱搞鸡肋的某虻 . 好想放假啊!!!! 话说猫厂现在产量低迷…… ZJ一下: T1,三维偏序,只码了$\Theta(N^2)$暴力 T2,暴力愉 ...

  10. 图书-技术-SpringBoot:《Spring Boot 企业级应用开发实战》

    ylbtech-图书-技术-SpringBoot:<Spring Boot 企业级应用开发实战> Spring Boot 企业级应用开发实战,全书围绕如何整合以 Spring Boot 为 ...