jQuery HTML5實現手機搖一搖換衣特效

jQuery HTML5實現手機搖一搖換衣特效_jquery

WBOY

發布： 2016-05-16 15:56:31

原創

1363 人瀏覽過

手機搖一搖可以應用在很多場景中，如搖一搖換抽獎，搖一搖搜歌等。本文我將為大家介紹如何使用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&#63;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格式傳回給前端調用，請看程式碼：

 
<&#63;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); 
&#63;>

登入後複製

當然本文只是一個實例應用，開發中你可以根據實際應用優化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');

登入後複製

以上所述就是本文的全部內容了，希望大家能夠喜歡。