1. var ele = document.getElementsByClassName("img-box")[0];
  2. var beginX, beginY, endX, endY, swipeLeft, swipeRight;
  3. ele.addEventListener('touchstart', function (event) {
  4. event.stopPropagation();
  5. event.preventDefault();
  6. beginX = event.targetTouches[0].screenX;
  7. beginY = event.targetTouches[0].screenY;
  8. swipeLeft = false, swipeRight = false;
  9. });
  10.  
  11. ele.addEventListener('touchmove', function (event) {
  12. event.stopPropagation();
  13. event.preventDefault();
  14. endX = event.targetTouches[0].screenX;
  15. endY = event.targetTouches[0].screenY;
  16. // 左右滑动
  17. if (Math.abs(endX - beginX) - Math.abs(endY - beginY) > 0) {
  18. /*向右滑动*/
  19. if (endX - beginX > 0) {
  20. swipeRight = true;
  21. swipeLeft = false;
  22. }
  23. /*向左滑动*/
  24. else {
  25. swipeLeft = true;
  26. swipeRight = false;
  27. }
  28. }
  29. else if(Math.abs(endX - beginX) - Math.abs(endY - beginY) < 0)
  30. {
  31. // 上下滑动
  32. }
  33. });
  34. ele.addEventListener('touchend', function (event) {
  35. event.stopPropagation();
  36. event.preventDefault();
  37.  
  38. if (Math.abs(endX - beginX) - Math.abs(endY - beginY) > 0) {
  39. event.stopPropagation();
  40. event.preventDefault();if (swipeRight) {
  41. swipeRight = !swipeRight;
  42. /*向右滑动*/
  43. }
  44. if(swipeLeft) {
  45. swipeLeft = !swipeLeft;
  46. /*向左滑动*/
  47. }
  48. }
  49. });

除了这种方法之外可以使用第三方插件来实现同样的效果,如QuoJS包含了多种移动端手势效果及ajax请求等操作,但是在使用过程中遇到了问题。使用了QuoJS后,会造成JQuery的一些单击事件和一些a标签href属性失效。并且发现QuoJS的swipeLeft和swipeRight事件中,手指只能水平滑动,如果稍微倾斜一点滑动,则事件不生效,也不知道是不是本人的设备问题。

js实现移动端手指左右上下滑动翻页效果的更多相关文章

  1. 微信里经常看到的滑动翻页效果,slide

    上个星期我们的产品姐姐让我帮她写个微信里经常看到的滑动翻页效果,今天抽空写了3个小demo(只写了webkit需要chrome模拟手机看 开启touch事件), 故此写个随笔. 1.demo1,整个大 ...

  2. ViewPager实现滑动翻页效果

    实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下: import android.content.Context; import andr ...

  3. 基于vue实现上下滑动翻页效果

    18年年底的时候,一直在做年度报告的H5页面,因为项目需要,需要实现上下滑动翻页,并且上滑的页面比正常页面的比例要缩小一定比例. 效果类似于http://www.17sucai.com/pins/de ...

  4. 桌面浏览器实现滑动翻页效果(Swiper)

    还是那个号称很炫的B/S展示软件,在液晶屏上展示需要有滑动翻页的效果(在同一页面滑动切换内容,不是切换页面),最后确定使用功能很强大的Swiper类库. 具体优点可参考:http://www.chin ...

  5. vue案例 - vue-awesome-swiper实现h5滑动翻页效果

    说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着. 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(这里 ...

  6. 转载 vue-awesome-swiper - 基于vue实现h5滑动翻页效果

    说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着. 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(这里 ...

  7. jquery插件实现上下滑动翻页效果

    <!DOCTYPE > <meta charset="utf-8" /> <head> <title>测试jquery</ti ...

  8. Android学习笔记之滑动翻页(屏幕切换)

    如何实现手机上手动滑动翻页效果呢?呵呵,在这里我们就给你们介绍一下吧. 一般实现这个特效会用到一个控件:ViewFlipper <1>View切换的控件—ViewFlipper 这个控件是 ...

  9. 移动端ios上下滑动翻页事件失效

    移动端开发过程中,在添加上下滑动事件时候,引入了最常用的移动端库zepto.js及其touch模块,有一种现象,安卓的手机没有问题,上下滑动翻页很正常 :但是到了ios上面,好啊,上下滑动会出现弹性滚 ...

随机推荐

  1. C-Lodop 非典型应用

    Lodop是什么? 有人说她是报表打印工具,因为那个add_print_table语句把报表统计的那点事弄了个明明白白: 有人说她是条码打印工具,因为用了她再也不用后台生成条码图片了,前端一行指令就动 ...

  2. 我的ef连接mysql之旅

      摘要: install-package ef6,mysql.data:增加provider invariantName="MySql.Data.MySqlClient" typ ...

  3. fir.im Weekly - 600个 Android 开源项目汇总

    本期 Weekly 收集了一些热度资源,包含 Android.iOS 开发工具与源码分享,程序员也应该了解的产品运营.设计等 Tips ,希望对你有帮助. 600个Android开源项目汇总 勤劳的 ...

  4. IOS笔记045-UIDatePicker和UIPickerView

    这是两种可以上下滚动的控件. 这是UIDatePicker,可以显示日期和时间. 这个是UIPickerView,显示类似几个选择项的界面. 注意点:PickerView的高度不能改,默认162,Pi ...

  5. Android 神兵利器—— Adb 常用命令

    总结的Android工具类文章: Android 神兵利器-- Adb 常用命令 Android 神兵利器-- Git 常用命令 Adb的全称为Android Debug Bridge,是管理andr ...

  6. 每天一个linux命令(44):top命令

    top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器.下面详细介绍它的使用方法.top是一个动态显示过程,即可以通过用户按键来不断刷新 ...

  7. 了解HTML表单之input元素的23种type类型

    目录 传统类型 text password file radio checkbox hidden button image reset submit 新增类型 color tel email url ...

  8. OCP-052 & 053部分答案解析

    OCP~052 . GRANT ANY OBJECT PRIVILEGE(授予任何对象权限):允许被授权人将其本身不拥有的对象的对象权限授予他人,但不能授予自己. . ENABLE VALIDATE ...

  9. PHP内核的学习--PHP生命周期

    一切的开始: SAPI接口 SAPI(Server Application Programming Interface)指的是PHP具体应用的编程接口, 就像PC一样,无论安装哪些操作系统,只要满足了 ...

  10. MySQL的学习--用户创建授权

    前一段时间,将项目改成SAAS的架构,每个billing account都可以获得一个子域,一个单独的数据库,一个单独的数据库用户和对应数据库的权限. 现在有时间了,将数据库相关的命令用博客备份一下. ...