手機搖一搖可以應用到很多場景中，如搖一搖換抽獎，搖一搖搜歌等。本文我將給大家介紹如何使用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');
以上所述就是本文的全部內容了，希望大家能夠喜歡。
新聞熱點
疑難解答
