- 1、本文档共27页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
1.触屏
1.1触屏概述
移动端浏览器兼容性较好,我们不需要考虑以前JS的兼容性问题,可以放心的使用放心的使用原生原生JSJS书写书写效果,但是移动
端也有自己独特的地方。比如触屏touch(也称触摸),AndroidAndroid和和IOSIOS都都有。有。
touch对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏可响应用户手指(或触控
代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏可响应用户手指(或触控
笔)对屏幕或者触控板操作。
常见的触屏如下:
1.触屏
1.2触摸对象(TouchEvent)
TouchEvent是一类描述手指在是一类描述手指在面(触摸屏、触摸板等)的状态变化的面(触摸屏、触摸板等)的状态变化的。这类。这类用于描述一个或多用于描述一个或多
个触点,使开发者可以检测触点的移动,触点的增加和减少,等等
touchstart、touchmove、touchend三个三个都会各自有都会各自有对象。对象。
触摸对象重点我们看三个常见对象列表:
触摸对象重点我们看三个常见对象列表:
因为平时我们都是给元素触摸,所以重点记住targetTocuhes
1.触屏
1.3移动端拖动元素
1.touchstart、touchmove、touchend可以实现拖动元素
2.但是拖动元素需要当前手指的坐标值我们可以使用targetTouches[0]里面的pageX和pageY
targetTouches[0]里面的pageX和pageY
3.移动端拖动的原理:手指移动中,计算出手指移动的距离。然后用盒子原来的位置+手指移动的距离
手指移动中,计算出手指移动的距离。然后用盒子原来的位置+手指移动的
4.手指移动的距离:手指滑动中的位置减去手指滑动中的位置减去手指刚开始触摸的位置手指刚开始触摸的位置
拖动元素三步曲:
(1)触摸元素touchstart:获取手指初始坐标,同时获得盒子原来的位置
获取手指初始坐标,同时获得盒子原来的位置
(2)移动手指touchmove:计算手指的滑动距离,并且移动盒子计手指的滑动距离,并且移动盒子
(3)离开手指touchend:
注意:手指移动也会触发滚动屏幕所以这里要默认的屏幕滚动e.preventDefault();
目触屏
C
移动端常见特效移动端常见特效
o移动端常用开发件
移动端常用开发插件
n移动端常用开发架
移动端常用开发框架
t
e
n
t
s
案例:移动端轮播图
移动端轮播图功能和基本PC端一致。
1.可以自动
2.手指可以拖动轮播图
案例分析
①自动功能
②开启定时器
③移动端移动,可以使用translate移动
端移动,可以使用translate移动
④想要想要优雅的移动,请添加过渡效果优雅的移动,请添加过渡效果
案例分析
①自动功能-无缝滚动
②注意,我们判断条件是要等到滚动完毕再去判断,就是过渡成后判断
注意,我们判断条件是要等到滚动完毕再去判断,就是过渡完成后判断
③此时需要添加检测过渡完成transitionend
此时需要添加检测过渡完成transitionend
④判断条件:如果索引号等于如果索引号等于33说明走到最后一张说明走到最后一张,此时此索引号要复原为索引号要复原为00
⑤此时此时,去
您可能关注的文档
- 中考化学试卷真题.pdf
- 购汽车商贸城方案.pdf
- 主管中药师-基础知识.pdf
- 说明阴天剧本.pdf
- 版数学七级上册解一元一次方程课件.pdf
- 民间文学七讲谜语.pdf
- 数学沪科版七年级(上册)2.1.2 第1课时 代数式的用法.pptx
- 英语人教PEP版八年级(上册)Unit 8 section A(1a-1c) ((共27张PPT).pptx
- 数学沪科版九年级(上册)21.2二次函数的图象和性质课件(共17张PPT).pptx
- 英语人教PEP版九年级(上册)Unit9+Section+A+3a.pptx
- 英语人教PEP版八年级(上册)Unit4+writing+写作.pptx
- 人美版美术四年级(上册)8 笔的世界 课件 (1).pptx
- 人美版美术七年级(上册)龙的制作.pptx
- 英语人教PEP版六年级(上册)Unit 2 第一课时.pptx
- 数学苏教版三年级(上册)3.3 长方形和正方形周长的计算 苏教版(共12张PPT).pptx
- 音乐人教版八年级(上册)青春舞曲 课件2.pptx
- 音乐人教版四年级(上册) 第一单元 音乐知识 附点四分音符|人教版.pptx
- 英语人教PEP版四年级(上册)Unit 6 Part B let's learn 1.pptx
- 道德与法治人教版二年级(上册)课件-3.11大家排好队部编版(共18张PPT).pptx
- 人美版美术七年级(上册)《黄山天下奇》课件1.pptx
文档评论(0)