js实现移动端手指左右上下滑动翻页效果
var ele = document.getElementsByClassName("img-box")[0];
var beginX, beginY, endX, endY, swipeLeft, swipeRight;
ele.addEventListener('touchstart', function (event) {
event.stopPropagation();
event.preventDefault();
beginX = event.targetTouches[0].screenX;
beginY = event.targetTouches[0].screenY;
swipeLeft = false, swipeRight = false;
}); ele.addEventListener('touchmove', function (event) {
event.stopPropagation();
event.preventDefault();
endX = event.targetTouches[0].screenX;
endY = event.targetTouches[0].screenY;
// 左右滑动
if (Math.abs(endX - beginX) - Math.abs(endY - beginY) > 0) {
/*向右滑动*/
if (endX - beginX > 0) {
swipeRight = true;
swipeLeft = false;
}
/*向左滑动*/
else {
swipeLeft = true;
swipeRight = false;
}
}
else if(Math.abs(endX - beginX) - Math.abs(endY - beginY) < 0)
{
// 上下滑动
}
});
ele.addEventListener('touchend', function (event) {
event.stopPropagation();
event.preventDefault(); if (Math.abs(endX - beginX) - Math.abs(endY - beginY) > 0) {
event.stopPropagation();
event.preventDefault();if (swipeRight) {
swipeRight = !swipeRight;
/*向右滑动*/
}
if(swipeLeft) {
swipeLeft = !swipeLeft;
/*向左滑动*/
}
}
});
除了这种方法之外可以使用第三方插件来实现同样的效果,如QuoJS包含了多种移动端手势效果及ajax请求等操作,但是在使用过程中遇到了问题。使用了QuoJS后,会造成JQuery的一些单击事件和一些a标签href属性失效。并且发现QuoJS的swipeLeft和swipeRight事件中,手指只能水平滑动,如果稍微倾斜一点滑动,则事件不生效,也不知道是不是本人的设备问题。
js实现移动端手指左右上下滑动翻页效果的更多相关文章
- 微信里经常看到的滑动翻页效果,slide
上个星期我们的产品姐姐让我帮她写个微信里经常看到的滑动翻页效果,今天抽空写了3个小demo(只写了webkit需要chrome模拟手机看 开启touch事件), 故此写个随笔. 1.demo1,整个大 ...
- ViewPager实现滑动翻页效果
实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下: import android.content.Context; import andr ...
- 基于vue实现上下滑动翻页效果
18年年底的时候,一直在做年度报告的H5页面,因为项目需要,需要实现上下滑动翻页,并且上滑的页面比正常页面的比例要缩小一定比例. 效果类似于http://www.17sucai.com/pins/de ...
- 桌面浏览器实现滑动翻页效果(Swiper)
还是那个号称很炫的B/S展示软件,在液晶屏上展示需要有滑动翻页的效果(在同一页面滑动切换内容,不是切换页面),最后确定使用功能很强大的Swiper类库. 具体优点可参考:http://www.chin ...
- vue案例 - vue-awesome-swiper实现h5滑动翻页效果
说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着. 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(这里 ...
- 转载 vue-awesome-swiper - 基于vue实现h5滑动翻页效果
说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着. 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(这里 ...
- jquery插件实现上下滑动翻页效果
<!DOCTYPE > <meta charset="utf-8" /> <head> <title>测试jquery</ti ...
- Android学习笔记之滑动翻页(屏幕切换)
如何实现手机上手动滑动翻页效果呢?呵呵,在这里我们就给你们介绍一下吧. 一般实现这个特效会用到一个控件:ViewFlipper <1>View切换的控件—ViewFlipper 这个控件是 ...
- 移动端ios上下滑动翻页事件失效
移动端开发过程中,在添加上下滑动事件时候,引入了最常用的移动端库zepto.js及其touch模块,有一种现象,安卓的手机没有问题,上下滑动翻页很正常 :但是到了ios上面,好啊,上下滑动会出现弹性滚 ...
随机推荐
- C#入门基础三四
数组:数组是一组具有相同类型的值的集合,可以通过索引来访问数组中的元素. 声明数组的语法: A.数据类型 [] 数组名称: B.数据类型 [] 数组名称 = new 数据类型[数组大小]; C.int ...
- java gc的考察
参考http://www.cnblogs.com/mazj611/p/3481610.html 看了很多博客.书, 仍然有所不懂.很多看过即忘记.实在要不得. 我们可以通过jstat获取gc情况 js ...
- WebApi系列~dynamic让你的省了很多临时类
回到目录 dynamic这个动态类型早在.net3.5时就已经出现了,当时是伴随的Linq一起让我们认识的,但在使用时总觉得有点别扭,因为它是internal的,所以不能跨程序集使用,这对于分层开发的 ...
- [Linux基础]Linux基础知识入门及常见命令.
前言:最近刚安装了Linux系统, 所以学了一些最基本的操作, 在这里把自己总结的笔记记录在这里. 1,V8:192.168.40.10V1:192.168.40.11Linux ip:192.168 ...
- Linux初学 - head,tail,grep,sed,yum,find
head 查看文件头部 -n 指定查看行数 默认10行 tail 查看文件尾部 n 指定查看行数 默认10行 Grep 命令 用法大全 . 参数: -I :忽略大小写 -c :打印匹配的行数 -l : ...
- iOS-数据持久化-偏好设置
一.简单介绍 很多iOS应用都支持偏好设置,比如保存用户名.密码.字体大小等设置,iOS提供了一套标准的解决方案来为应用加入偏好设置功能 每个应用都有个NSUserDefaults实例,通过它来存取偏 ...
- iOS---------- @synchronized(self)的用法
1. synchronized 这个主要是考虑多线程的程序,这个指令可以将{ } 内的代码限制在一个线程执行,如果某个线程没有执行完,其他的线程如果需要执行就得等着. Objective-C除了提 ...
- 那些年我们写过的T-SQL(下篇)
下篇的内容很多都会在工作中用到,尤其是可编程对象,那些年我们写过的存储过程,有木有?到目前为止很多大型传统企业仍然很依赖存储过程.这部分主要难理解的部分是事务和锁机制这块,本文会进行简单的阐述.虽然很 ...
- Java多线程系列--“JUC原子类”02之 AtomicLong原子类
概要 AtomicInteger, AtomicLong和AtomicBoolean这3个基本类型的原子类的原理和用法相似.本章以AtomicLong对基本类型的原子类进行介绍.内容包括:Atomic ...
- 如何在windows 10 x64安装佳能 CP900 驱动
佳能太无耻,为了销售CP910 , CP900 到win8 ,win8.1,win 10 都没有驱动程序,网上找的方法都不行,IT民工自有办法: 1.按住shift键,重启电脑 restart 2.在 ...