使用Hammer.js的H5页面开发DOM的一些小说法
前几天,一个小伙伴说叫我帮他写一个移动端上的一个轮播图,个人一般是不接私活的,毕竟平时工作也是单双休,时间也不很多。
可能大部分程序员,多余的时间都是看看新闻,打游戏,或者学习新的知识,缺少运动吧。
所以,个人感觉接私活那点时间,你可以去锻炼身体,或者学习新的知识,当然这些都是看法,完全不代表你跟我有一样的看法,好吧,不过既然是朋友,以前也是同学,而且不就是一个轮播图吗,自己也写过一些移动端里,轮播图是移动端上最常见的一个广告展示功能。
但是,当小伙伴把大致的需求高速了我以后,完全跟轮播图没有,不对,只有一毛钱关系,因为他的需求就是要我帮他写个小小的游戏。
游戏内容大致是,用户注册,选择,然后进入到选择题目类别,然后给用户提示,然后进入题目的预览,用户预览5个题目,题目是一个英文单词,有3个汉字让用户滑动选择答案,然后看完预览题目后则可以通过 按钮 进入答题模式。并且用户答一题就做一个统计用户的对错,因为用户答题完,会有统计用户答题哪些错了还是全对了。也就是公布正确答案。并且给用户积分后回到初始页面,继续开始游戏。
需求说完了,是不是感觉干轮播图有啥关系,有,每次到下一个页面是轮播到下个页面去的 0 0 !嘿,这算不算呢。
接下来对游戏进行了DOM的结构搭建,搭建完就开始写JS了。
这里用到的是一个依赖与Jquery.js的轻量级手势库,可能大家问为什么不用zepto,我这里不做解释了,总之坑听多的。这个Hammer.js支持以下手势特点,并且做简单介绍:
tap 手指单击不超过250m
Press 手指长按超过500m
pan 手指的按下到滑动到抬起,包括按下的滑动开始,跟滑动取消,前3着像原生的 ontouchstart ontoumove ontouchend;
swipe 快速滑动,里面包括 swipeleft 快速滑动 swiperight 快速右滑动等
Pinch 2个手指的放大缩小手势
Rotate 2个手指旋转
使用它需要先通过new 它的构造函数,如: var $obj = new Hammer( element );
element就是你要传进去的DOM对象,但是Hammer.js有个缺点就是你不能一次给多个DOM元素绑定事件,也就是说每次new出来的DOM对象只能是一个,所以 element 只能是一个DOM元素,不能是一组,比如: $('#obj')[0]
然后可以用它自身封装好的事件绑定函数,on,off等,更多属性方法可以new出来一个对象后,console.log( $obj );就能全部显示出来了。
下面说说DOM的结构,如图:
比如,当前滑动是要DOM3进行位移,transform:translate(x,y,z);
一般我们可能会给DOM3绑定事件,但是当你绑定以后,对其进行位移如-1000px,那么现在你的手指位置就不是按照当前屏幕的位置来计算的了,是按照元素当前的位置进行计算的,这样可能会有点小麻烦。你可能会说那给DOM1绑定事件就行了,获取到数值以后给DOM3进行位移,然后你的手指在DOM1上怎么操作也是原始的位置。没错,我也是这样做的,但恰恰这样做给自己带来了麻烦,很多时候事件不被触发,或者要操作2次才能触发,why?
这里可能就是往往移动端的事件机制的不同吧,元素并不能及时的冒泡到父级上去。对于这个问题,由于设备限制,跟chrome的模拟器这样做触发不了事件,暂时下次另外想办法测试调试。但是上面的问题在微信内置浏览器里没有任何问题,在其他浏览器上都有问题,包括chrome的APP跟苹果自带的浏览器
所以我们平时尽可能的还是把事件绑定到最内层的DOM里去,减少自己掉坑的几率。
最后我花了2天时间把这个游戏做好了。
再吐槽一下一些知名APP的支持情况很差的问题,如火狐桌面浏览器很好这个作为一个Web程序员都是知道的,但是到的APP支持的东西很少,连可能获取屏幕的尺寸都会做错,所以我基本上测试的浏览器只有 苹果各个版本的自带浏览器,QQ内置浏览器,微信内置浏览器,跟UC浏览器,多一个QQ浏览器了。
不过相信很多app能慢慢的支持更多,只是希望脚步能快一点。
文采不好,文章只当交流与自己的记录。谢谢
使用Hammer.js的H5页面开发DOM的一些小说法的更多相关文章
- C#开发微信门户及应用(44)--微信H5页面开发的经验总结
在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...
- 纯css、js 的H5页面对接echarts
做项目时,会遇到一些零碎的技术点.记录下来以防忘记 需求:做可视化界面,但是需要兼容ie8,需要用纯css.js 的H5页面对接echarts,下面为效果图(带定时器循环显示tooltip). 实现方 ...
- 移动端H5页面开发,碰到一个字体变大的BUG
移动端H5页面开发,碰到一个字体变大的BUG webkit内核下,对不定高宽的元素可能会放大其字体.那么,就可以设置一个max-width:或者使用-webkit-text-size-adjust: ...
- 前端视频直播技术总结及video.js在h5页面中的应用
全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/12557070.html,多谢,=.=~ (如果对你有帮助的话请帮我点个赞啦) 目前有一个需求是在 ...
- 四种webAPP横向滑动模式图解—H5页面开发
一.容器整体滑动(DEMO只演示A-B-C-B,下同) 模拟动画效果见下图(上),滑动分解见下图(下): DEMO地址:http://nirvana.sinaapp.com/demo_slider/s ...
- H5页面开发的touchmove事件
在做一屏滚动的H5页面的时候,必须移除touchmove事件,如果不移除,在安卓机上会触发微信原生的向下滚动拉出刷新.在IOS上出现上下都可以继续滑动,所以需要移除document的touchmove ...
- 口红游戏 插口红游戏 h5页面开发
目前火热的口红机游戏,需要在设备前参与,然后成功后即可赢得口红,作为平台运营者来说还是比较重资产的,目前我们将它搬到了线上.每个人都可以远程玩这样的口红机游戏了.直接在手机微信里试玩,成功后,后台即可 ...
- [转载]常见的移动端H5页面开发遇到的坑和解决办法
转过来,平时看看.虽然还有很多问题至今无解.比如:华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏.!! 1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是 ...
- 常见的移动端H5页面开发遇到的坑和解决办法
转过来,平时看看.虽然还有很多问题至今无解.比如:华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏.!! 1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是 ...
随机推荐
- 信息安全实验四:information-security
title: authentication date: 2016-01-13 14:33:22 categories: information-security tags: authenticatio ...
- Oracle merge into 使用记录
符合条件进行更新操作,不符合则进行插入操作. merge into myd_nsrdt n using ('as nsrsbh,'' as nsrmc, ' as nowphone,sysdate a ...
- web api 2 学习笔记 (Odata ODataQueryOptions 使用)
[ODataRoutePrefix("products")] public class ProductController : BaseController { [ODataRou ...
- 借鉴DP思想: HouseRobberIII
The thief has found himself a new place for his thievery again. There is only one entrance to this a ...
- 在 SQL Server 2012 附加 Adventure Works 範例資料庫
原文地址:http://technet.microsoft.com/zh-tw/library/eb1f9417-4cca-4575-a725-187bcd60c7e7 附加数据库时报错 错误5123 ...
- bootstrap完整导航栏
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- INTELLIJ IDEA集成CHECKSTYLE(转)
转自:http://www.cnblogs.com/kiwi-wang/p/4166410.html 本文中使用intelliJ IDEA版本为14.0.1,其他版本差异不大,可同样安装. 下载安装C ...
- Shell的输入输出
通过使用read命令,可以实现从终端中输入内容后输出或执行运算 #!/bin/bash #Author: blacksonny #Copyright (c) #Script follows here: ...
- 状态模式(State) 笔记
让一个对象随着内部的状态改变而发生改变. 状态的两种切换方式: 1) 完全交给Context类切换, 2) 给Context初始化状态,其他的切换根据每一个State类进行切换,Context对象不再 ...
- wsdl文件结构分析
WSDL (Web Services Description Language,Web服务描述语言)是一种XML Application,他将Web服务描述定义为一组服务访问点,客户端可以通过这些服务 ...