溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
HTML5+PHP+jQuery如何實現手機搖一搖換衣，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
手機搖一搖可以應用到很多場景中，如搖一搖換抽獎，搖一搖搜歌等。我將給大家介紹如何使用HTML5+PHP+jQuery實現手機搖一搖換衣效果。
注意，這是一篇WEB知識綜合應用的文章，閱讀本文前提是，您需要有HTML5，jQuery，PHP，MySQL等相關方面的基礎知識。
我頁面中默認展示產品信息（某品牌連衣裙產品圖片和文字說明），當然實際應用中可以從數據庫中獲取產品信息。
<p id="pro" rel="1">
<p>使勁晃動您的手機</p>
<img src="images/z1.jpg" width="300" height="300">
<p>灰色</p>
</p>
然后在頁面中加載jQuery庫文件，同時我們繼續沿用上一篇文：《HTML5手機重力與方向感應的應用——搖一搖效果》中用到的偵聽手機搖晃的代碼：shake.js。
<script src="jquery.js"></script>
<script src="shake.js"></script>
我們使用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);
}
});
}
};
后臺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');
看完上述內容，你們掌握HTML5+PHP+jQuery如何實現手機搖一搖換衣的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
