jQuery+HTML5实现手机摇一摇换衣特效
手机摇一摇可以应用到很多场景中，如摇一摇换抽奖，摇一摇搜歌等。本文我将给大家介绍如何使用HTML5+PHP+jQuery实现手机摇一摇换衣效果。
注意，这是一篇WEB知识综合应用的文章，阅读本文前提是，您需要有HTML5，jQuery，PHP，MySQL等相关方面的基础知识。
HTML
我页面中默认展示产品信息（某品牌连衣裙产品图片和文字说明），当然实际应用中可以从数据库中获取产品信息。
<divid="pro"rel="1"> <p>使劲晃动您的手机</p> <imgsrc="images/z1.jpg"width="300"height="300"> <p>灰色</p> </div>
然后在页面中加载jQuery库文件，同时我们继续沿用上一篇文：《用HTML5实现手机摇一摇的功能的教程》中用到的侦听手机摇晃的代码：shake.js。
<scriptsrc="jquery.js"></script> <scriptsrc="shake.js"></script>
jQuery
我们使用shake.js检测到用户手机摇晃，当摇晃发生时调用函数shakeEventDidOccur()，向后台product.php发送Ajax请求，后台程序会根据提交的请求参数返回相应的JSON数据。我们根据返回的数据显示对应的产品图片和文字信息，实现了换衣的效果。
window.onload=function(){
varmyShakeEvent=newShake({
threshold:15
});
myShakeEvent.start();
window.addEventListener('shake',shakeEventDidOccur,false);
functionshakeEventDidOccur(){
varpro_id=$("#pro").attr("rel");
$.getJSON("product.php?id="+pro_id,function(json){
if(json.msg==1){
$("#pro").attr("rel",json.pro.id)
.html('<imgsrc="images/'+json.pro.pic+'"width="300"height="300"><p>'+json.pro.color+'</p>');
}else{
alert(json.msg);
}
});
}
};
PHP
后台product.php根据接收ajax提交过来的参数id，查询数据库中除当前id以外的数据信息，获取到相应的数据集结果，然后随机从数据集中取出一组数据（因为每次只展示一条数据信息），以JSON格式返回给前端调用，请看代码：
<?php
//连接数据库
include_once("connect.php");
$id=intval($_GET['id']);
if($id==0)exit;
//查询数据
$query=mysql_query("select*fromdresswhereid!='$id'");
$total=mysql_num_rows($query);
$arr=array();
if($total==0){
$arr['msg']='没有足够的衣服！';
}else{
$arr['msg']=1;
while($row=mysql_fetch_array($query)){
$pros[]=array(
'id'=>$row['id'],
'color'=>$row['color'],
'pic'=>$row['pic']
);
}
//随机取一组数据
$arr['pro']=$pros[array_rand($pros)];
}
//输出JSON格式数据
echojson_encode($arr);
?>
当然本文只是一个实例应用，开发中你可以根据实际应用优化PHP程序代码，打造符合你项目的优质PHP代码，最后奉上mysql数据表结构：
CREATETABLEIFNOTEXISTS`dress`( `id`int(11)NOTNULLAUTO_INCREMENT, `color`varchar(30)NOTNULL, `pic`varchar(30)NOTNULL, PRIMARYKEY(`id`) )ENGINE=MyISAMDEFAULTCHARSET=utf8AUTO_INCREMENT=5; INSERTINTO`dress`(`id`,`color`,`pic`)VALUES (1,'灰色','z1.jpg'), (2,'紫色','z2.jpg'), (3,'红色','z3.jpg'), (4,'蓝色','z4.jpg');
以上所述就是本文的全部内容了，希望大家能够喜欢。