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 ...
随机推荐
- unity3d入门 Demo 学习记录
闲来学习一下 unity3d 的Demo,记录如下. 官方 Demo,名字为 Roll-A-Ball,如图 场景比较简单,包含地面.玩家精灵.主摄像机.墙壁.可拾取的方块.分数为示 text.平行光源 ...
- JS流程控制语句 重复重复(for循环)语句结构: for(初始化变量;循环条件;循环迭代) { 循环语句 }
重复重复(for循环) 很多事情不只是做一次,要重复做.如打印10份试卷,每次打印一份,重复这个动作,直到打印完成.这些事情,我们使用循环语句来完成,循环语句,就是重复执行一段代码. for语句结构: ...
- Python基础知识之4——三大控制结构
控制结构就是控制程序执行顺序的结构. Python 有三大控制结构,分别是顺序结构.分支结构(选择结构)以及循环结构.任何一个项目或者算法都可以使用这三种结构来设计完成.这三种控制结构也是结构化程序 ...
- 【默默努力】h5-game-heroVSmonster
先放下作者大大的项目地址:https://github.com/yangyunhe369/h5-game-heroVSmonster 然后游戏的效果为 截动图的按键与游戏按键应该冲突,我就截几张图片了 ...
- 使用JS实现页面中动态添加文件上传输入项
1. 编写JSP <%@ page language="java" import="java.util.*" pageEncoding="UTF ...
- 【JZOJ3303】城市规划
description 刚刚解决完电力网络的问题, 阿狸又被领导的任务给难住了. 刚才说过, 阿狸的国家有n 个城市, 现在国家需要在某些城市对之间建立一些贸易路线, 使得整个国家的任意两个城市都直接 ...
- 「题解」:[BZOJ4558]方
问题: 方 时间限制: 2 Sec 内存限制: 256 MB 题面 题目描述 上帝说,不要圆,要方,于是便有了这道题.由于我们应该方,而且最好能够尽量方,所以上帝派我们来找正方形 上帝把我们派到了一 ...
- Ubuntu GitHub操作——创建仓库
一.创建仓库 1.初始化仓库(只在初始化时执行一次) git init 这部是新建并初始化仓库 2.向仓库中添加文件 git add . 将文件夹内的所有文件都添加到仓库中(注意小“.”),在这部之后 ...
- duilib教程之duilib入门简明教程4.响应按钮事件
上一个Hello World的教程里有一句代码是这样的:CControlUI *pWnd = new CButtonUI; 也就是说,其实那整块绿色背景区域都是按钮的区域.(这里简要介绍下,CC ...
- MSI右键添加管理员运行.reg
Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Msi.Package\shell\runas]@="右键以管理员运行MSI& ...