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

经常我们玩微信都会用到查到附近的人，都是在app上实现手机摇一摇的功能。现在，我们将此技术搬移到手机web上，供大家学习，有需要的小伙伴可以参考下。

手机摇一摇可以应用到很多场景中，如摇一摇换抽奖，摇一摇搜歌等。本文我将给大家介绍如何使用HTML5+PHP+jQuery实现手机摇一摇换衣效果。

注意，这是一篇WEB知识综合应用的文章，阅读本文前提是，您需要有HTML5，jQuery，PHP，MySQL等相关方面的基础知识。

HTML

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

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

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

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

jQuery

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

1. window.onload = function() {  
2. var myShakeEvent = new Shake({  
3. threshold: 15  
4. });  
5.  
6. myShakeEvent.start();  
7.  
8. window.addEventListener('shake', shakeEventDidOccur, false);  
9.  
10. function shakeEventDidOccur () {  
11. var pro_id = $("#pro").attr("rel");  
12. $.getJSON("product.php?id="+pro_id,function(json){  
13. if(json.msg==1){  
14. $("#pro").attr("rel",json.pro.id)  
15. .html('<img src="images/'+json.pro.pic+'" width="300" height="300"><p>'+json.pro.color+'</p>');  
16. }else{  
17. alert(json.msg);  
18. }  
19. });  
20. }  
21. };  

PHP

后台product.php根据接收ajax提交过来的参数id，查询数据库中除当前id以外的数据信息，获取到相应的数据集结果，然后随机从数据集中取出一组数据(因为每次只展示一条数据信息)，以JSON格式返回给前端调用，请看代码：

1. <?php  
2. //连接数据库  
3. include_once("connect.php");  
4.  
5. $id = intval($_GET['id']);  
6. if($id==0) exit;  
7. //查询数据  
8. $query = mysql_query("select * from dress where id!='$id'");  
9. $total = mysql_num_rows($query);  
10. $arr = array();  
11. if($total==0){  
12. $arr['msg'] = '没有足够的衣服！';  
13. }else{  
14. $arr['msg'] = 1;  
15. while($row=mysql_fetch_array($query)){  
16. $pros[] = array(  
17. 'id' => $row['id'],  
18. 'color' => $row['color'],  
19. 'pic' => $row['pic']  
20. );  
21. }  
22. //随机取一组数据  
23. $arr['pro'] = $pros[array_rand($pros)];  
24. }  
25. //输出JSON格式数据  
26. echo json_encode($arr);  
27. ?>  

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

1. CREATE TABLE IF NOT EXISTS `dress` (  
2. `id` int(11) NOT NULL AUTO_INCREMENT,  
3. `color` varchar(30) NOT NULL,  
4. `pic` varchar(30) NOT NULL,  
5. PRIMARY KEY (`id`)  
6. ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;  
7.  
8. INSERT INTO `dress` (`id`, `color`, `pic`) VALUES 
9. (1, '灰色', 'z1.jpg'),  
10. (2, '紫色', 'z2.jpg'),  
11. (3, '红色', 'z3.jpg'),  
12. (4, '蓝色', 'z4.jpg'); 

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