jQuery和HTML5如何實(shí)現(xiàn)手機(jī)搖一搖的換衣特效

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)jQuery和HTML5如何實(shí)現(xiàn)手機(jī)搖一搖的換衣特效，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

注意，這是一篇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)品信息。

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

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

 <script src="jquery.js"></script> 
<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)了換衣的效果。

 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

后臺(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)看代碼：

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

當(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)：

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

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