jQuery和HTML5如何實現手機搖一搖的換衣特效

這期內容當中小編將會給大家帶來有關jQuery和HTML5如何實現手機搖一搖的換衣特效，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

注意，這是一篇WEB知識綜合應用的文章，閱讀本文前提是，您需要有HTML5，jQuery，PHP，MySQL等相關方面的基礎知識。

HTML

我頁面中默認展示產品信息（某品牌連衣裙產品圖片和文字說明），當然實際應用中可以從數據庫中獲取產品信息。

 <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>

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');

上述就是小編為大家分享的jQuery和HTML5如何實現手機搖一搖的換衣特效了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。