博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
移动端轮播图手势分析+源码
阅读量:4333 次
发布时间:2019-06-07

本文共 1151 字,大约阅读时间需要 3 分钟。

分析:移动端的轮播图最主要的就是手势触摸点击,移动和移动结束的一系列的事件,利用touch相关事件实现移动端常见滑动效果和常见的手势事件  。轮播图滑动的时候通过判断触摸屏幕的开始位置与结束位置是否大于容器的三分之一(至于多少自己定),大于则下一张,小于则回到原来的位置

解析touch:

  1.touch是移动端的触摸,是一组事件。

  2.touchstart     当触摸屏幕的时候触发

  3.touchend  当手指离开屏幕是触发

  4.touchmove      手指在屏幕中来回滑动触发

  5.touchcancel     被迫中止手势滑动的时候出发(来电,信息等)

  具体参考网站:

以上的事件的even对象上都存在以下的属性:

  名字:TouchList 触摸点(一个手指触摸就是一个触发点,和屏幕的接触点的个数)的集合

  changedTouches 改变后的触摸点集合
  targetTouches 当前元素的触发点集合
  touches 页面上所有触发点集合

触摸点集合在每个事件触发的时候,changedTouches 每个事件都会记录,而targetTouches,touches 在离开屏幕的时候无法记录触摸点。

我们需要做的就是获取touches里面的位置属性,如下:

  e.touches[0] 第一个触摸点

   clientX clientY 基于浏览器窗口(视口)
   pageX pageY 基于页面(视口)
   screenX screenY 基于屏幕

以下为事件测试查看属性值的源码:

1 
2

 

 源码:

1   2   3   4     
5 移动端轮播 6 7 8
9
23
24 157 158 159

 

转载于:https://www.cnblogs.com/Dobin/p/9075194.html

你可能感兴趣的文章
小D课堂 - 零基础入门SpringBoot2.X到实战_第8节 数据库操作之整合Mybaties和事务讲解_35、事务介绍和常见的隔离级别,传播行为...
查看>>
小D课堂 - 零基础入门SpringBoot2.X到实战_第9节 SpringBoot2.x整合Redis实战_40、Redis工具类封装讲解和实战...
查看>>
小D课堂 - 零基础入门SpringBoot2.X到实战_第9节 SpringBoot2.x整合Redis实战_37、分布式缓存Redis介绍...
查看>>
小D课堂 - 零基础入门SpringBoot2.X到实战_第10节 SpringBoot整合定时任务和异步任务处理_42、SpringBoot常用定时任务配置实战...
查看>>
小D课堂 - 零基础入门SpringBoot2.X到实战_第9节 SpringBoot2.x整合Redis实战_39、SpringBoot2.x整合redis实战讲解...
查看>>
小D课堂 - 零基础入门SpringBoot2.X到实战_第14节 高级篇幅之SpringBoot多环境配置_59、SpringBoot多环境配置介绍和项目实战...
查看>>
小D课堂 - 零基础入门SpringBoot2.X到实战_第10节 SpringBoot整合定时任务和异步任务处理_41、SpringBoot定时任务schedule讲解...
查看>>
小D课堂 - 零基础入门SpringBoot2.X到实战_第10节 SpringBoot整合定时任务和异步任务处理_43、SpringBoot2.x异步任务实战(核心知识)...
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_1_01课程简介
查看>>
小D课堂 - 零基础入门SpringBoot2.X到实战_第11节 Logback日志框架介绍和SpringBoot整合实战_45、SpringBoot2.x日志讲解和Logback配置实战...
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_1_02技术选型
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_汇总
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_2_01传统架构演进到分布式架构
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_2_02 微服务核心基础讲解
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_2_04微服务下电商项目基础模块设计...
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_3-01 什么是微服务的注册中心
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_3-03CAP原理、常见面试题
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_3-05 服务注册和发现Eureka Server搭建实战...
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_3-06 服务注册和发现之Eureka Client搭建商品服务实战...
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_3-07 Eureka服务注册中心配置控制台问题处理...
查看>>