前几天,一个小伙伴说叫我帮他写一个移动端上的一个轮播图,个人一般是不接私活的,毕竟平时工作也是单双休,时间也不很多。

  可能大部分程序员,多余的时间都是看看新闻,打游戏,或者学习新的知识,缺少运动吧。

  所以,个人感觉接私活那点时间,你可以去锻炼身体,或者学习新的知识,当然这些都是看法,完全不代表你跟我有一样的看法,好吧,不过既然是朋友,以前也是同学,而且不就是一个轮播图吗,自己也写过一些移动端里,轮播图是移动端上最常见的一个广告展示功能。

  但是,当小伙伴把大致的需求高速了我以后,完全跟轮播图没有,不对,只有一毛钱关系,因为他的需求就是要我帮他写个小小的游戏。

  游戏内容大致是,用户注册,选择,然后进入到选择题目类别,然后给用户提示,然后进入题目的预览,用户预览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的一些小说法的更多相关文章

  1. C#开发微信门户及应用(44)--微信H5页面开发的经验总结

    在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...

  2. 纯css、js 的H5页面对接echarts

    做项目时,会遇到一些零碎的技术点.记录下来以防忘记 需求:做可视化界面,但是需要兼容ie8,需要用纯css.js 的H5页面对接echarts,下面为效果图(带定时器循环显示tooltip). 实现方 ...

  3. 移动端H5页面开发,碰到一个字体变大的BUG

    移动端H5页面开发,碰到一个字体变大的BUG webkit内核下,对不定高宽的元素可能会放大其字体.那么,就可以设置一个max-width:或者使用-webkit-text-size-adjust: ...

  4. 前端视频直播技术总结及video.js在h5页面中的应用

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/12557070.html,多谢,=.=~ (如果对你有帮助的话请帮我点个赞啦) 目前有一个需求是在 ...

  5. 四种webAPP横向滑动模式图解—H5页面开发

    一.容器整体滑动(DEMO只演示A-B-C-B,下同) 模拟动画效果见下图(上),滑动分解见下图(下): DEMO地址:http://nirvana.sinaapp.com/demo_slider/s ...

  6. H5页面开发的touchmove事件

    在做一屏滚动的H5页面的时候,必须移除touchmove事件,如果不移除,在安卓机上会触发微信原生的向下滚动拉出刷新.在IOS上出现上下都可以继续滑动,所以需要移除document的touchmove ...

  7. 口红游戏 插口红游戏 h5页面开发

    目前火热的口红机游戏,需要在设备前参与,然后成功后即可赢得口红,作为平台运营者来说还是比较重资产的,目前我们将它搬到了线上.每个人都可以远程玩这样的口红机游戏了.直接在手机微信里试玩,成功后,后台即可 ...

  8. [转载]常见的移动端H5页面开发遇到的坑和解决办法

    转过来,平时看看.虽然还有很多问题至今无解.比如:华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏.!! 1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是 ...

  9. 常见的移动端H5页面开发遇到的坑和解决办法

    转过来,平时看看.虽然还有很多问题至今无解.比如:华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏.!! 1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是 ...

随机推荐

  1. Linux启动网卡时出现RTNETLINK answers: File exists错误解决方法

    这里说一下,如果复制了虚拟机,设置新的MAC地址为什么? 在虚拟机的网络设置中--->高级.然后找到如下窗口,生成新的MAC地址即可. ----------------------------- ...

  2. 解决jsp页面乱码问题

    页面也需要设置转码的:页面:(.jsp) <%@ page language="java" import="java.util.*" pageEncodi ...

  3. Eric Pement的单行awk命令收集

    超实用的. awk1line_zh-CN.txt 可惜中文版的网址好像不能访问了.. HANDY ONE-LINE SCRIPTS FOR AWK 30 April 2008 Compiled by ...

  4. QML控件类关系图

    花了点时间整理了下QML控件之间的关系图和QML控件和C++类的对应关系,基于Qt5.6版本 其他版本可能会有差异 图片像素比较大,另存为后放大图片就可以看清楚了 工程下载地址 QMLClassDia ...

  5. 进化计算简介和遗传算法的实现--AForge.NET框架的使用(六)

    原文:进化计算简介和遗传算法的实现--AForge.NET框架的使用(六) 开学了,各种忙起来了… 上一篇介绍了AForge.NET在人工神经网络上的一点点使用,但是老觉不过瘾.matlab用着实在不 ...

  6. Mono Compatibility

    The easiest way to describe what Mono currently supports is:Everything in .NET 4.5 except WPF, WWF, ...

  7. rnqoj-28-合唱队形-最长上升子序列

    想当年大一的时候,一个最长上升子序列的问题使得我的罚时上升了不少....当年还是图样啊 这道题目本质就是求最长上升子序列 #include<stdio.h> #include<str ...

  8. 在 SQL Server 2012 附加 Adventure Works 範例資料庫

    原文地址:http://technet.microsoft.com/zh-tw/library/eb1f9417-4cca-4575-a725-187bcd60c7e7 附加数据库时报错 错误5123 ...

  9. 动态sql语句

    当需要根据外部输入的参数来决定要执行的SQL语句时,常常需要动态来构造SQL查询语句,个人觉得用得比较多的地方就是执行搜索查询的SQL语句.对于搜索,可能要根据搜索条件判断来动态执行SQL语句. 在S ...

  10. 【Ruby on Rails 学习一】ubuntu14.04配置rvm与ruby

    要安装ruby,首先要安装rvm,借助rvm安装ruby rvm 的全称是 Ruby Version Manager ,是一款由 Wayne E. Seguin  开发的一款命令行工具.rvm 能够让 ...