用HTML5做一个类似于微信联系人的一个demo，遇到一点问题

touchMove 要结合使用touchstar,touchend进行判断的。

网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、小程序设计、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了济水街道免费建站欢迎大家使用！

没有做过类似的东西，但是下面的是仿微信图片浏览的代码，写了注释，希望对你有点帮助！

script

function imgreset(){

$(this).css3Animate({

width: imgoldw+"px",

//x:0,

//y:0,

time: "0ms",

callback: function () {

pagex1_s=null;pagey1_s=null;pagex2_s=null;pagey2_s=null;pagex1_e=null;pagey1_e=null;

pagex2_e=null;pagey2_e=null;pagexm1_s=null;pageym1_s=null;pagexm1_e=null;pageym1_e=null;

dm=0;dn=0;

imgneww=imgoldw

}

});

}

var imgoldw=320;//获取图片寛度

var imglength=$(".imgbox").length;//获取图片个数

var demos = document.getElementById("container"),

spirit, startScale, startRotation;

var dm=0,dn=0,imgneww=imgoldw,ismove=false,pic_c=0;

var body_w=$("body").width();

var body_h=$("body").height();

var pagex1_s,pagey1_s,pagex2_s,pagey2_s,pagex1_e,pagey1_e,pagex2_e,pagey2_e,pagexm1_s,pageym1_s,pagexm1_e,pageym1_e;

function touchStart(e) {

//e.stopPropagation();

e.preventDefault();

if(e.touches.length == 1){

ismove=true;

var touch1 = e.touches[0];

pagexm1_s = touch1.pageX;

pageym1_s = touch1.pageY;

}

if (e.touches.length == 2){

var touch1 = e.touches[0];

pagex1_s = touch1.pageX;

pagey1_s = touch1.pageY;

var touch2 = e.touches[1];

pagex2_s = touch2.pageX;

pagey2_s = touch2.pageY;

left = Math.min(pagex1_s, pagex2_s),

top = Math.min(pagey1_s, pagey2_s),

width = Math.abs(pagex1_s - pagex2_s),

height = Math.abs(pagey1_s - pagey2_s);

}

}

function touchMove(e){

//e.stopPropagation();

e.preventDefault();

if (ismovee.touches.length == 1){

//单点触摸

var touch1 = e.touches[0],

pagexm1_e = touch1.pageX,

pageym1_e = touch1.pageY,

//移动了多少

dx=pagexm1_e-pagexm1_s,

dy=pageym1_e-pageym1_s;

//是多少

dm=dx+dm;

dn=dy+dn;

if(imgneww==imgoldw){

$(this).css3Animate({

x:dm,

//y:dn,

time: "0ms",

callback: function () {

}

});

//如果图未放大，则执行翻页

}else{

//如果图片已经被放大，则可以拖动

$(this).css3Animate({

x:dm,

y:dn,

time: "0ms",

callback: function () {

//记录新位置

}

});

}

pagexm1_s=pagexm1_e,pageym1_s=pageym1_e;

}

if (e.touches.length == 2){

//多点触摸

var touch1 = e.touches[0];

pagex1_e = touch1.pageX;

pagey1_e = touch1.pageY;

var touch2 = e.touches[1];

pagex2_e = touch2.pageX;

pagey2_e = touch2.pageY;

//计算两点开始距离 old

var oldx=Math.abs(pagex1_s-pagex2_s),

oldy=Math.abs(pagey1_s-pagey2_s),

//计算两点开始距离 new

newx=Math.abs(pagex1_e-pagex2_e),

newy=Math.abs(pagey1_e-pagey2_e);

if(oldxnewxoldynewy){

var imgw=$(this).width();//获取图片寛度

resizex=oldx-newx;//缩小多少

var resizey=oldy-newy;//缩小多少

if(imgwimgoldw){

$(this).css3Animate({

width: imgneww-resizex+"px",

x:dm,

y:dn,

time: "0ms",

callback: function () {

}

});

imgneww=imgneww-resizex;

};

}else{

var imgw=$(this).width();//获取图片寛度

var resizex=Math.abs(oldx-newx);

var resizey=Math.abs(oldy-newy);//缩小多少

if(imgw640){

$(this).css3Animate({

width: imgneww+resizex+"px",

x:dm,

y:dn,

time: "0ms",

callback: function () {

}

});

imgneww=imgneww+resizex;

}

}

}

pagex1_s=pagex1_e,pagey1_s=pagey1_e,pagex2_s=pagex2_e,pagey2_s=pagey2_e;

}

function touchEnd(e) {

e.preventDefault();

var imglength=$(".imgbox").length;

var id=parseInt($(this).attr("id").substr(9));

if(ismoveimgneww==imgoldwdm0Math.abs(dm)body_w/2id!=imglength-1){

$.ui.loadDiv('#my_photos_'+(id+1),false,false,'flip');

$(this).css3Animate({

x:0,

time: "0ms",

callback: function () {

dm=0;

}

});

}else if(ismoveimgneww==imgoldwdm0Math.abs(dm)body_w/2id!=0){

$.ui.loadDiv('#my_photos_'+(id-1),false,false,'flip');

$(this).css3Animate({

x:0,

time: "0ms",

callback: function () {

dm=0;

}

});

}else{

if(ismoveimgneww==imgoldw){

$(this).css3Animate({

x:0,

time: "0ms",

callback: function () {

dm=0;

}

});

}

}

ismove=false;

}

function gestureEnd(e) {

e.preventDefault();

if (!spirit) return;

canvas.removeChild(spirit);

spirit = null;

startScale = null;

startRotation = null;

}

/* $(".imgbox img").bind("touchstart", touchStart, false);

$(".imgbox img").bind("touchmove", touchMove, false);

$(".imgbox img").bind("touchend", touchEnd, false);

$(".imgbox img").bind("gestureend", gestureEnd, false);

$(".imgbox img").bind("tap", imgreset, false);

*/

/script

微信上的html5页面是怎么制作出来的？

你好，微信上的HTML页面一般是用工具做出来的，很少有开发的H5案列，最常见是翻页H5，自由度比较低，只能修改图片换换位子，而专业工具自由度比较高，可以很灵活的设计H5，epub360在专业工具中上手难度适中，值得大家尝试下。

js html5 仿微信摇一摇 怎么控制触发时间

HTML5 有很多强大的功能，比如获取设备的 x y z 坐标。这些值都可以通过代码获取并呈现出来。

也可以计算加速度及设备移动的方向，不知未来还会有多强大！

也不知什么机会看到了摇一摇，网页版本的。从网上看了一下，编写了一个代码，测试成功，贴出来。

可以后期加上很多功能，比如做个音乐播放器，或者内嵌到自己个性博客中等等。

下面是HTML源代码，

//Javascript

var SHAKE_THRESHOLD = 3000;

var last_update = 0;

var x = y = z = last_x = last_y = last_z = 0;

function init() {

if (window.DeviceMotionEvent) {

window.addEventListener('devicemotion', deviceMotionHandler, false);

} else {

alert('not support mobile event');

}

}

function deviceMotionHandler(eventData) {

var acceleration = eventData.accelerationIncludingGravity;

var curTime = new Date().getTime();

if ((curTime - last_update) 100) {

var diffTime = curTime - last_update;

last_update = curTime;

x = acceleration.x;

y = acceleration.y;

z = acceleration.z;

var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;

if (speed SHAKE_THRESHOLD) {

alert("摇动了，播放");

var media=document.getElementByIdx_x("musicBox");//获取音频控件

media.setAttribute("src","");

media.load();//加载音频

media.play();//播放音频

}

last_x = x;

last_y = y;

last_z = z;

}

}

html body onload="init()"

\

用力摇一摇你手机\

\

如何在微信公众平台上做HTML5游戏

微信公众平台上做HTML5游戏，基本的有三个法子。

1 阅读原文中添加链接。但，如果这样坐引导的文章一定要做好来，不然转换率会很低的。千万要走心一点，不要平白无故的就放在阅读原文，谁看？反正俺是不会看的。

2 图片的形式，在图片中添加入h5的二维码。别人只要长按就可识别二维码跳转到你的h5去，什么图片你随意，例如植入到节日的场景啊、各种动漫图片均可。同样要做好引导，才能引发转化。

3 最直接的形式，你们大部分可能都实现不了，以前公众号有一种功能可以开通，叫直接跳转，也就是只要点击标题就可以直接看到h5，但据我所知现在这个功能申请不了，也就是大多数人都实现不了，原来申请通过的才可以。

另外需要了解HTML5用什么软件制作的，一般的有maka、易企秀、兔展。

选择毋庸赘述，可以都尝试一下，都是较为简单上手的，如果你觉得逼格不够，可以用互动大师。用这些软件如果自己有一定的设计能力做出简易的h5页面基本是没有问题啦。

但如果是很复杂炫技的h5，一些是可以在前面提及的平台的模板处购买，一些是找第三方公司做的。

制作的小贴士：

1 不要用原生字体、真的好hi丑，自己选好看的字体然后做成png格式，然后放进去。

2 如果你有设计能力，最好把图层分开放进去，才能设置每个不同的动态动画。也就是不要做整张图放进去，其实一页可能是好几张图甚至十来张图。

3 如果你自己没有设计能力，那还是在平台上找模板吧。。。然后配合自己的文案。尤其是节日类的h5，模板一搜一大堆，但即便是用模板，也请走走心，不要全特么照搬过来一句话不改。

4 如果不会用ps，去练习用美图秀秀，基础效果基本没多大问题。

5 如果你连png都不会做，艺术字体在线生成器 艺术字转换器 这个神器送给你，大把字体你挑。

6 如何插入报名表 免费制作报名网页 报名表设置后可在后台查看以及下载excel模式。

7 文字尽量少而美，没人愿意看你长篇大论，尤其是h5.

8 文字太多、页面太复杂要注意，很可能造成打开的时候回很卡。

如何制作一个html5单页微信游戏?

方法1：学习html+css+js，学习canvas API，熟悉一种html5游戏开发引擎（比如egret,createjs）。

方法2：花点钱，外包出去。

方法3：百度搜索“微信游戏制作工具”。

在微信上做 HTML5 网页和普通的网页开发有何不同

如果考虑的范围只是微信内置浏览器和手机上的浏览器应用（safari、chrome）的话，差不多有几个不同点吧：

最突出的差别，前端要注意分享功能！上线之前，每个页面基本都要review一边分享功能是不是完善的。

微信最近提供了新的接口，所以以后会有更多与微信贴合紧密的特性。

html5接口上的差异。safari和chrome的话提供的html5接口会更多，而微信内置浏览器的接口比较少，印象最深的是usermedia。前几天在项目里还发现，微信里固定定位的支持还是不够好，safari在这点上现在好很多了。所以如果想让 web 应用在微信里体验更好一些的话，iscroll类的模块是免不了的。

微信浏览器的兼容性问题，在android上比较明显。印象比较深的是三星的机型上不支持background-size-cover，必须使用-webkit-background-size才行。小米的输入框比较难搞。。。

开发、调试上的问题。android chrome比较好，有远程调试功能。微信里面基本木有办法。遇到棘手的问题，一般会使用modernizr来做特性检测，或者使用远程log工具调试。

文章题目：仿微信html5,仿微信转账软件
本文路径：http://kswjz.com/article/dsdoecg.html