手機搖一搖可以應用到很多場景中，如搖一搖換抽獎，搖一搖搜歌等。本文我將給大家介紹如何使用HTML5+PHP+jQuery實現(xiàn)手機搖一搖換衣效果。

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

HTML

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

 p id= pro rel= 1  p 使勁晃動您的手機 /p  img src= images/z1.jpg width= 300 height= 300  p 灰色 /p  /p 

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

 script src= jquery.js /script  script src= shake.js /script 

jQuery

我們使用shake.js檢測到用戶手機搖晃，當搖晃發(fā)生時調(diào)用函數(shù)shakeEventDidOccur()，向后臺product.php發(fā)送Ajax請求，后臺程序會根據(jù)提交的請求參數(shù)返回相應的JSON數(shù)據(jù)。我們根據(jù)返回的數(shù)據(jù)顯示對應的產(chǎn)品圖片和文字信息，實現(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

后臺product.php根據(jù)接收ajax提交過來的參數(shù)id，查詢數(shù)據(jù)庫中除當前id以外的數(shù)據(jù)信息，獲取到相應的數(shù)據(jù)集結(jié)果，然后隨機從數(shù)據(jù)集中取出一組數(shù)據(jù)（因為每次只展示一條數(shù)據(jù)信息），以JSON格式返回給前端調(diào)用，請看代碼：

 ?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 ]  //隨機取一組數(shù)據(jù)  $arr[ pro ] = $pros[array_rand($pros)]; //輸出JSON格式數(shù)據(jù) echo json_encode($arr); ? 

當然本文只是一個實例應用，開發(fā)中你可以根據(jù)實際應用優(yōu)化PHP程序代碼，打造符合你項目的優(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, 藍色 , z4.jpg 

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，更多相關內(nèi)容請關注PHP ！

相關推薦：

html5實現(xiàn)兼容各大瀏覽器的播放器的解析

HTML打折計算價格的實現(xiàn)原理與腳本代碼

以上就是如何使用jQuery和HTML5實現(xiàn)手機搖一搖的換衣特效的詳細內(nèi)容，其它編程語言

鄭重聲明：本文版權歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。