结合HTML5、CSS3、JS模拟微信摇一摇开发小记

客户想要通过网页实现一个类似微信摇一摇的小游戏,周末在家没事,就做了下,摇一摇之前有做,但是效果不是类似微信那样的,所以照搬旧实现方案,采用github上人气略高的一个Device Accelerometer封装函数,这样就不用自己去爬各种坑了。

摇动事件是解决了,但想模拟声音、震动之类的,还得找一下新的api,因为之前没用过,所以大概收集了下资料,下面简单记录一下。

摇动就不再赘述了,简单几步,可以参考这里https://github.com/alexgibson/shake.js
查看更多...

纯CSS实现Footer固定底部,超过一屏自动撑开

日常开发中经常遇到网页内容过少时底部版权区域上浮,网页是经典的Header、Content、Footer三部分组成的情况下,之前要么采用js修改Footer的position,高度低于一屏时采用fixed,超出改用static,但是这样会出现抖动,也试过初始化时设置Content的min-height,但终归是使用了js,不太完美,CSS的也试过使用margin-bottom:-10000px;padding-bottom:10000px的方法填充底部颜色,但效果不见得有多好看。

最近又遇到此类问题,尝试采用之前提到过的CSS水平垂直居中方法来解决,最终找到比较靠谱的方法,就此总结一下,以备后用。

废话不说,直接上代码,以下为CSS,采用border-box,所以IE7下面无效,由于工作原因,只测试到IE8,没考虑低版本浏览器。 查看更多...

JS获取鼠标点击坐标五种方式及兼容性

关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种

event.clientX/Y
event.pageX/Y
event.offsetX/Y
event.layerX/Y
event.screenX/Y

clientX/Y:

clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变

兼容性:所有浏览器均支持 查看更多...

基于注解整合Spring4、Jersey2与Groovy(非零配置)

众所周知,Servlet3.0作为J2EE 6规范一部分,随J2EE6一起发布,并且Tomcat7已经完全支持,其中就我个人而言,最为关注的就是异步与注解支持,但这么久以来,实际项目中一直不曾使用,近来业余有空,就尝试了一下Servlet 3.0的注解,但这不是重点,关于Servlet 3.0注解@WebServlet的使用,网上一搜一大把,这里不再赘述。

本文的重点是大部分基于注解来整合Spring4、Jersey2与Groovy实现Restful风格接口,为什么说是大部分呢?因为实践中发现个小小的问题,Jersey2.0开始,同样采用新规范,支持Spring加载但目前只支持XML配置形式,毕竟这两个东西不是同一公司出品,完全融合还需要一定的时间去折腾,这里就不自己造轮子了,毕竟写几行XML配置也不是那么的麻烦,当然,如果你有洁癖、如果你愿意基于Spring官方方案实现Restful或者自己实现Jersey2与Spring4的桥接,依然可以保持零配置,这里就不再啰嗦,简单分享下配置示例。 查看更多...

Git push error:dst refspec XXX matches more than one

最近工作中遇到这样的问题,使用的是Git做版本控制,在PUSH代码的时候,出现如下错误:

error: dst refspec XXX matches more than one.
error: failed to push some refs to 'git@xxx.xx:xxx.git'

初步一看,还想,怎么可能,出现两个相同的分支?表示很不解。
查看Git服务器上的分支也只有一个指定名称的分支,最后无意间发现在于服务器上有一个和分支名称相同的tag,安装项目组的习惯,tag一般都是以时间作为名称的,这里怎么会出现这个,好奇中删掉它重试,果然,Git把tag和分支搞在一起了,tag名称不能和分支名称完全相同,不知道这是Git个别版本的bug还是就这样机制。

仅此记录以方便大家。

Android View动画进行中事件无效解决方法

Android View动画运行时,在运动的View上绑定的事件将不能被触发,因为诸如点击事件等,触发点是绑定在View控件初始化时所在位置的点击,当动画移动后点击坐标就发生了改变,通过查询一些资料,了解到,Android 3.0以下,动画存在问题,它只移动了View绘制显示的地方,却没有移动View的物理位置,具体底层实现大家可以看源代码了解,我不大清楚底层,这里就不多说了,下面说说简单的解决方法。

只需继承父级布局,覆盖onTouchEvent(或者其他需要捕获的事件)。这里我以FrameLayout为例,因为要捕获点击事件,实现onTouchEvent,然后通过获取当前点击坐标计算出当前点击范围内包含的View控件,找到第一个就直接触发该View的事件,然后break,示例代码如下: 查看更多...

关于HTML5不得不说的一些事

近两年来,IT界炒的最火热的发展方向无非是O2O,而炒的火热的技术也无非是HTML5,但实际上,HTML5究竟是什么?能做什么呢?知其然,更要知其所以然,这是中国人对知识真理的追求写照。然而在关于HTML5的问题上,这句话并没有显现出来。HTML5会改变下一代互联网,HTML5潜力无限,这些观点在互联网上多之甚多。为什么呢?HTML5在互联网上究竟带来了什么?这些问题一抛出,全行就愕然了。甚至HTML5究竟是什么,都很难让人阐述清楚。

首先,简单而言HTML5就是超文本标记语言规范的5.0版本,当然对于不同的人来说,HTML5具有不同的意义。对某些人来说,它仅仅意味着"页眉"和"页脚"之类的新标签,以及一系列出现于标记的新属性。对其他人而言,这意味着出现在网络上的新鲜有趣事物,其中包括植入单个浏览器或其他非HTML5规格的技术。 查看更多...

巧用Fiddler代理调试微信JSSDK

最近开发微信端网页,涉及到使用微信JSSDK提供的分享、照片选择、上传、预览等功能,由于微信官方有安全域名的限制,调试一开始都是通过暴漏在公网的一个测试环境上进行,但是一次次的修改、构建再修改再构建太耽误时间,最后就考虑模拟安全域名,绕过检测。

PC端很方便,直接修改HOST指向微信公众号后台配置的安全域名即可,但是这样也只能使JSSDK通过校验,实际使用中往往会调用手机资源,如分享、上传等。

于是,又找到了我们的前端神器——Fiddler,熟悉前端的都知道,这玩意很强大,具体功能这里不再赘述。我们就说说其代理功能,其实Fiddler默认的拦截形式就是通过代理实现,即所有请求通过127.0.0.1:8888(默认值)中转,而这个地址则是Fiddler处理程序所提供的。 查看更多...

使用Chrome调试(编辑)JavaScript、CSS、HTML

说起来Chrome的调试,可能大多数人都用过,用Chrome调试JavaScript、CSS的确是方便了前端开发人员,但这大多数人中,基本都是用它来调试,而非编辑,通常情况下,应该都是打开浏览器开发者工具,对JavaScript进行debug或者对CSS进行修改,完成后返回编辑器(IDE)修改源码,刷新并重试。这看似简单的过程,实际上已经在浏览器、编辑器(IDE)之间的切换中消耗了一倍以上的时间,事实上,我们并不需要如此,Chrome为开发者提供了更为方便的调试模式,可以让你在浏览器中调试的同时,一步到位、修改源码,下面我们就来简单介绍一下。

方法很简单,只需两个步骤。 查看更多...

简单处理,让AvalonJS支持cmd

AvalonJS是国内前端大神开发维护的一个迷你MVVM框架,它不像AngularJS大而全,但实现了常见业务逻辑中能用到的功能,这里就不再赘述,欲知详情,可前往官网了解

官网地址:http://avalonjs.github.io/

AvalonJS自带加载器,当然,如果是大的项目,我们可能在引入AvalonJS之前就在使用诸如RequireJS(AMD)、SeaJS(CMD)之类的加载器,而AvalonJS自带的加载器也是基于AMD的,对于我们使用SeaJS的来说,想引入AvalonJS看来只能是在源码上下功夫了。

分析发现,官方提供了关闭加载器的方式,同时也提供了不带加载器的版本,所以如果使用RequireJS作为项目加载器的话,直接关闭自带加载器或者下载无加载器版本(avalon.shim.js)即可,关闭方式如下 查看更多...