移动端开发触屏事件的封装

2015-09-25

/*
author:grycheng
本次封装触屏事件实现触屏操作更加细腻
调用方式:
$(xxx).touchme(event,function(distance,type,axis){
//distance：代表x轴或者y轴偏移（以偏移更多的一个方向为准） 可为正值或负值，代表不同方向的偏移
//type：为move时表示当前触发的是touchmove事件，为click时触发的是touchend事件
//axis：为x代表x轴偏移，为y代表y轴偏移
});
*/
$.fn.touchme = function(event,fn){	
	var startele = $(this);
	var touch = event.targetTouches[0];
	var endPos = false;
	startPos = {x:touch.pageX,y:touch.pageY,time:+new Date};
	isScrolling = 0;
	startele.bind("touchmove",function(event){
		if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
		var touch = event.targetTouches[0];
		endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
		isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0;
		if(isScrolling === 0){
			event.preventDefault();
			fn(endPos.x,'move','x');	
		}else{			
			event.preventDefault();
			fn(endPos.y,'move','y');	
		}
	});
	startele.bind("touchend",function(event){
		var duration = +new Date - startPos.time;
		if(isScrolling === 0){				
			fn(endPos.x,'click','x');	
		}else{
			fn(endPos.y,'click','y');
		}
		startele.unbind("touchmove");
		startele.unbind("touchend");
	});
};

阅读全文

jquery网页浮动导航锚点链接屏幕上下滚动效果,锚点滚屏跟随

2015-09-25

jquery网页浮动导航锚点链接屏幕上下滚动效果,锚点滚屏跟随

查看演示

阅读全文

有用的javascript外部文件或其他外部文件引用

2015-09-22

1、

1	<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' /><!--引入谷歌字体API-->

阅读全文

开发中常用的正则表达式

2015-09-22

下面都是我收集的一些比较常用的正则表达式，因为平常可能在表单验证的时候，用到的比较多。特发出来，让各位朋友共同使用。

匹配中文字符的正则表达式： [u4e00-u9fa5]

阅读全文

理解事件捕获，在限制范围内拖拽div+吸附+事件捕获

2015-09-22

一、实现的效果是在限制范围内拖拽div+吸附+事件捕获。

这里需要理解的是事件捕获，这个事件捕获也是为了兼容div在拖拽过程中，文本不被选中这个问题。

阅读全文

深入详解Phaser补间动画

2015-09-22

Tweens是什么?

Tweens通常被称为补间动画。补间动画是指在确定好两个关键帧之后，由计算机自动生成这两帧之间插补帧，从而实现动画的过程。例如，物体从当前位置在两秒内向右移动200个像素，只要设置好目标位置（当前位置的右边200像素）和时长（两秒），则计算机会自动生成补间动画，在两秒内使物体从当前位置移到目标位置。

阅读全文

基于HTML5+Ajax实现的手机定位

2015-09-22

目前的版本只是demo，仍有几个问题需要完善一下，问题如下：

1，如何将经纬度等数据发送到被定位人看不到的页面上。

2，如何绕过或或强制让打开链接的人允许使用定位（弹窗）。

3，目前或取经纬度后，要自行用谷歌地球去分析用户位置（通过卫星地图定位并显示），如何简化这一部分，让被定位者的经纬度自动生成地图图片并一起导入到其他页面（总之不能让被定位者察觉自己被定位的这一事实）。

阅读全文

根据开始时间(服务器时间、客户端时间)和结束时间倒计时

2015-09-22

效果图：

HTML代码：

<h1>根据结束时间和服务器时间 倒计时</h1>
<div class="time-item">
<span id="day_show">0天</span>
<strong id="hour_show">0时</strong>
<strong id="minute_show">0分</strong>
<strong id="second_show">0秒</strong>
</div>

阅读全文

Sublime插件—Phaser Completions

2015-09-22

由于在sublime上面没有看到很好的phaser补全代码的插件，于是决定自己动手写一个。

加入了很多的补全提示，但是发现太多的提示反而会是种干扰，而且提示出来的词优先级也是有问题。不知道sublime上有没有地方可以设置

还有就是使用了英文.之后，前面的内容就不包含在提示搜索里面了，这是不是也有地方可以设置，高手请不吝赐教

阅读全文

Phaser里通过json读取数据的两种方式

2015-09-22

1. Phaser官方教程里的方式

首先在preload里面加载游戏数据文本

阅读全文

Phaser官方示例教程整理—Sprite（精灵）

2015-09-21

官方教程示例 http://phaser.io/examples

精灵 Sprite

1. 创建一个精灵

1 2	game.load.image('mushroom', 'assets/sprites/mushroom2.png'); var test = game.add.sprite(200, 200, 'mushroom');game.add.bitmapText(200, 100, '字体名称', '文本内容', 64);

阅读全文

Phaser官方示例教程整理—Camera（相机）

2015-09-21

官方教程示例 http://phaser.io/examples

相机 Camera

1. 镜头跟随

实现游戏角色在大地图中的镜头跟随效果，角色保持在镜头中间，靠近边界时镜头也不会超出地图边界。

阅读全文

Phaser官方示例教程整理—Text(文本)

2015-09-21

官方教程示例 http://phaser.io/examples

文本 Text

1. 加载位图字体

1 2	game.load.bitmapFont('名称', '位图png', '位图xml'); game.add.bitmapText(200, 100, '字体名称', '文本内容', 64);

阅读全文

Phaser官方示例教程整理—Buttons(按钮)

2015-09-21

官方教程示例 http://phaser.io/examples

按钮 Buttons

1. 点击事件

添加按钮 button = game.add.button(X, Y, ‘按钮图片名’, 函数名, this, 2, 1, 0);

阅读全文

在IIS中配置Phaser的examples站点

2015-09-21

phaser是HTML5开源的游戏引擎。

一、源码下载地址：https://github.com/photonstorm/phaser

二、文档结构：

阅读全文

Phaser中TextBox的运用

2015-09-21

使用Phaser有一段时间的,越来越喜欢这个游戏引擎，但是它不像egret那样有专业的公司和团队去维护，并提供大量的工具，所以Phaser没有那么多的工具，但是真的很好用。

在做游戏登录界面的时候，发现Phaser没有提供TextBox的控件，在官方的论坛进行搜索以后得到了如下的结论

阅读全文

手机端页面rem自适应脚本

2015-09-21

什么是rem

rem就是1rem单位就等于html节点fontsize的像素值。所以改变html节点的fontsize是最为关键的一步。根据手机宽度改变相对大小就可以实现自适应了，就不用什么媒体查询那些的。

阅读全文

html5实现微信摇一摇功能

2015-09-18

在HTML5中，DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间，通过改时间可以获取设备的运动状态、加速度等数据（另还有deviceOrientation事件提供了设备角度、朝向等信息）。
而通过DeviceMotion对设备运动状态的判断，则可以帮助我们在网页上就实现“摇一摇”的交互效果。

阅读全文