jQuery+HTML5实现手机摇一摇换衣特效

手机摇一摇可以应用到很多场景中，如摇一摇换抽奖，摇一摇搜歌等。本文我将给大家介绍如何使用HTML5+PHP+jQuery实现手机摇一摇换衣效果。
注意，这是一篇WEB知识综合应用的文章，阅读本文前提是，您需要有HTML5，jQuery，PHP，MySQL等相关方面的基础知识。

HTML

我页面中默认展示产品信息（某品牌连衣裙产品图片和文字说明），当然实际应用中可以从数据库中获取产品信息。

 <div id="pro" rel="1"><p>使劲晃动您的手机</p><img src="images/z1.jpg" width="300" height="300"><p>灰色</p> </div>

然后在页面中加载jQuery库文件，同时我们继续沿用上一篇文：《用HTML5实现手机摇一摇的功能的教程》中用到的侦听手机摇晃的代码：shake.js。

 <script src="jquery.js"></script> <script src="shake.js"></script>

jQuery

我们使用shake.js检测到用户手机摇晃，当摇晃发生时调用函数shakeEventDidOccur（），向后台product.php发送Ajax请求，后台程序会根据提交的请求参数返回相应的JSON数据。我们根据返回的数据显示对应的产品图片和文字信息，实现了换衣的效果。

 window.onload = function（） {var myShakeEvent = new Shake（{ threshold: 15}）; myShakeEvent.start（）; window.addEventListener（"shake", shakeEventDidOccur, false）; function shakeEventDidOccur （） { var pro_id = $（"#pro"）.attr（"rel"）; $.getJSON（"product.php?id="+pro_id,function（json）{if（json.msg==1）{ $（"#pro"）.attr（"rel",json.pro.id） .html（"<img src="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 * from dress where id！="$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格式数据 echo json_encode（$arr）; ?>

当然本文只是一个实例应用，开发中你可以根据实际应用优化PHP程序代码，打造符合你项目的优质PHP代码，最后奉上mysql数据表结构：

 CREATE TABLE IF NOT EXISTS `dress` （`id` int（11） NOT NULL AUTO_INCREMENT,`color` varchar（30） NOT NULL,`pic` varchar（30） NOT NULL,PRIMARY KEY （`id`） ） ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;INSERT INTO `dress` （`id`, `color`, `pic`） VALUES （1, "灰色", "z1.jpg"）, （2, "紫色", "z2.jpg"）, （3, "红色", "z3.jpg"）, （4, "蓝色", "z4.jpg"）;

以上所述就是本文的全部内容了，希望大家能够喜欢。