快捷導(dǎo)航

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

更新時(shí)間：2015年06月05日 09:58:56 投稿：hebedich

經(jīng)常我們玩微信都會(huì)用到查到附近的人，都是在app上實(shí)現(xiàn)手機(jī)搖一搖的功能?，F(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

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

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

然后在頁(yè)面中加載jQuery庫(kù)文件，同時(shí)我們繼續(xù)沿用上一篇文：《用HTML5實(shí)現(xiàn)手機(jī)搖一搖的功能的教程》中用到的偵聽(tīng)手機(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提交過(guò)來(lái)的參數(shù)id，查詢數(shù)據(jù)庫(kù)中除當(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ù)庫(kù) 
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'] = '沒(méi)有足夠的衣服！'; 
}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)用，開(kāi)發(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');

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

您可能感興趣的文章: