經常我們玩微信都會用到查到附近的人，都是在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'); 

以上所述就是本文的全部內容了，希望大家能夠喜歡。