經(jīng)常我們玩微信都會(huì)用到查到附近的人，都是在app上實(shí)現(xiàn)手機(jī)搖一搖的功能。現(xiàn)在，我們將此技術(shù)搬移到手機(jī)web上，供大家學(xué)習(xí)，有需要的小伙伴可以參考下。

手機(jī)搖一搖可以應(yīng)用到很多場(chǎng)景中，如搖一搖換抽獎(jiǎng)，搖一搖搜歌等。本文我將給大家介紹如何使用HTML5+PHP+jQuery實(shí)現(xiàn)手機(jī)搖一搖換衣效果。

注意，這是一篇WEB知識(shí)綜合應(yīng)用的文章，閱讀本文前提是，您需要有HTML5，jQuery，PHP，MySQL等相關(guān)方面的基礎(chǔ)知識(shí)。

HTML

我頁面中默認(rèn)展示產(chǎn)品信息(某品牌連衣裙產(chǎn)品圖片和文字說明)，當(dāng)然實(shí)際應(yīng)用中可以從數(shù)據(jù)庫中獲取產(chǎn)品信息。

1. <div id="pro" rel="1">  
2. <p>使勁晃動(dòng)您的手機(jī)</p>  
3. <img src="images/z1.jpg" width="300" height="300">  
4. <p>灰色</p>  
5. </div>  

然后在頁面中加載jQuery庫文件，同時(shí)我們繼續(xù)沿用上一篇文：《用HTML5實(shí)現(xiàn)手機(jī)搖一搖的功能的教程》中用到的偵聽手機(jī)搖晃的代碼：shake.js。

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

jQuery

我們使用shake.js檢測(cè)到用戶手機(jī)搖晃，當(dāng)搖晃發(fā)生時(shí)調(diào)用函數(shù)shakeEventDidOccur()，向后臺(tái)product.php發(fā)送Ajax請(qǐng)求，后臺(tái)程序會(huì)根據(jù)提交的請(qǐng)求參數(shù)返回相應(yīng)的JSON數(shù)據(jù)。我們根據(jù)返回的數(shù)據(jù)顯示對(duì)應(yīng)的產(chǎn)品圖片和文字信息，實(shí)現(xiàn)了換衣的效果。

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

后臺(tái)product.php根據(jù)接收ajax提交過來的參數(shù)id，查詢數(shù)據(jù)庫中除當(dāng)前id以外的數(shù)據(jù)信息，獲取到相應(yīng)的數(shù)據(jù)集結(jié)果，然后隨機(jī)從數(shù)據(jù)集中取出一組數(shù)據(jù)(因?yàn)槊看沃徽故疽粭l數(shù)據(jù)信息)，以JSON格式返回給前端調(diào)用，請(qǐng)看代碼：

1. <?php  
2. //連接數(shù)據(jù)庫  
3. include_once("connect.php");  
4.  
5. $id = intval($_GET['id']);  
6. if($id==0) exit;  
7. //查詢數(shù)據(jù)  
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. //隨機(jī)取一組數(shù)據(jù)  
23. $arr['pro'] = $pros[array_rand($pros)];  
24. }  
25. //輸出JSON格式數(shù)據(jù)  
26. echo json_encode($arr);  
27. ?>  

當(dāng)然本文只是一個(gè)實(shí)例應(yīng)用，開發(fā)中你可以根據(jù)實(shí)際應(yīng)用優(yōu)化PHP程序代碼，打造符合你項(xiàng)目的優(yōu)質(zhì)PHP代碼，最后奉上mysql數(shù)據(jù)表結(jié)構(gòu)：

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, '藍(lán)色', 'z4.jpg'); 

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。