纯js 判断手势滑动方向
$('body').on('touchstart', '#gallerySlider img', function(e) {
var touch = e.originalEvent,
startX = touch.changedTouches[0].pageX;
startY = touch.changedTouches[0].pageY;
slider.on('touchmove', function(e) {
e.preventDefault();
touch = e.originalEvent.touches[0] ||
e.originalEvent.changedTouches[0];
if (touch.pageX - startX > 10) {
console.log("右划");
slider.off('touchmove');
showPrevious();
} else if (touch.pageX - startX < -10) {
console.log("左划");
slider.off('touchmove');
showNext();
};
if (touch.pageY - startY > 10) {
console.log("下划");
} else if (touch.pageY - startY < -10) {
console.log("上划");
};
});
// Return false to prevent image
// highlighting on Android
return false;
}).on('touchend', function() {
slider.off('touchmove');
});
纯js 判断手势滑动方向的更多相关文章
- js判断手指滑动方向(移动端)
var startx, starty; //获得角度 function getAngle(angx, angy) { return Math.atan2(angy, angx) * 180 / Mat ...
- js判断元素滑动方向(上下左右)移动端
每天学习一点点. 1 var startx, starty; //获得角度 function getAngle(angx, angy) { return Math.atan2(angy, angx) ...
- jquery 判断手势滑动方向(上下左右)
$('body').on('click', '.placeholder img', function(e) { //touchstart在你之前发生,不管些什么,都先执行下面的 }); $('body ...
- 移动端JS判断手势方向
原生JS判断手势方向的解决思路: 1.滑动屏幕事件使用html5 的touchstart滑动开始事件和touchend滑动结束事件. 2.方向的判断,以起点做平面坐标系,与终点连线做直线,直线与x正半 ...
- 对于移动端浏览器touch事件的研究总结(4)判断手指滑动方向
最近有一些微信的项目,虽然页面很简单,但配合手势后的效果却是很不错的.最基本的效果就是手指向上滑,页面配合css3出现一个展开效果,手指向下滑将展开的内容按原路径收起.其实就是一个简单的判断手指滑动方 ...
- 《移动端浏览器Touch事件判断手指滑动方向方法》
$("body").on("touchstart", function(e) { e.preventDefault(); startX = e. ...
- jquery判断手指滑动方向
jquery判断手指滑动方向 <pre> /*判断哪个滑动方向还是自己改下 要么上下 要么左右*/ var startX; var startY; $(".shanghua&qu ...
- web移动前端页面,jquery判断页面滑动方向
/*判断上下滑动:*/ $('body').bind('touchstart',function(e){ startX = e.originalEvent.changedTouches[0].page ...
- 移动端 uni-app 滑动事件 精确判断手指滑动方向
移动端根据手指滑动操作判断滑动方向 设计思路: 1.根据移动端touchstart和touchend方法获取手指触摸屏幕的开始坐标和结束坐标 2.根据两个坐标计算与水平方向的夹角 3.根据夹角判断当前 ...
随机推荐
- sharedpreferences的简单使用
sharedpreferences 以键值对的方式将数据保存在xml 创建:SharePreferences sp = getShareferences(name,context.---) con ...
- linux split 命令 将一个大的文件拆分成若干小文件
. 以行数拆分 -l 参数: 原始文件 拆分后文件名前缀 例:以50行对文件进行拆分 big.txt small_ 拆分后会生成 small_aa small_ab small_ac ... . 以大 ...
- Samba的安装与配置
Samba的安装与配置: 准备:关闭其他虚拟设备 #/etc/init.d/libvirtd stop #/etc/init.d/xend stop #chkconfig libvirtd off # ...
- linux时钟基本概念、CST与UTC、以及NTP简单设置
1,安装linux的时候在设置时间的时候有一个选项:system clock uses UTC,那么这个UTC是什么意思呢? 世界协调时间(Universal Time Coordinated,UTC ...
- 成都印迹婚纱摄影 | yinjilove.com
成都印迹婚纱摄影工作室 官方网站:http://yinjilove.com/ 联系方式:028-84278563 手机及微信号:18180642817 微信公众号:印迹摄影 地址:成都市锦江区牛王庙东 ...
- iOS navigationcontroller pop 回到上一层视图 如何刷新
1.从视图A中navigation controller push到视图B,当视图B navigationcontroller pop回到视图A时,并不会调用A的viewDidLoad,但是会调用vi ...
- js 经典正则判断 一个字符串是否包含另一个字符串
if (!new RegExp(list_table[i].value.split("—")[0]).test(lhtj)) { }判断在lhtj中是否包含list_table[i ...
- Amazon的推荐系统
本文引自http://blog.csdn.net/fwing/article/details/4942886 现在的推荐系统特别火啊.做得最好的应该是Amazon了. 上面是Amazon的图书推荐. ...
- 【OC简介-类和对象】
OC与C语言相比,体现的是一种面向对象的思想.OC完全兼容C语言 OC中大多数类前面都有前缀NS,来源于乔布斯NextStep团队,被苹果收购后保留了所有基本语法,合并到Foundation中 OC语 ...
- ActionBar的使用
ActionBar的使用很普遍,可以充当工具栏使用.本文介绍如何使用ActionBar. 1.ActionBar一般包含有多个工具按钮.所以,需要新建一个xml文件来存放ActionBar中的内容.在 ...