jQuery와 HTML5를 사용하여 휴대폰을 흔들어 옷을 갈아입는 특수 효과를 얻는 방법

 <p id="pro" rel="1"> 
 <p>使劲晃动您的手机</p> 
 <img src="images/z1.jpg" width="300" height="300"> 
 <p>灰色</p> 
</p>

 <script src="jquery.js"></script> 
<script src="shake.js"></script>

 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(&#39;<img src="images/&#39;+json.pro.pic+&#39;" width="300" height="300"><p>&#39;+json.pro.color+&#39;</p>&#39;); 
   }else{ 
    alert(json.msg); 
   } 
  }); 
 } 
};

 <?php 
//连接数据库 
include_once("connect.php"); 
 
$id = intval($_GET[&#39;id&#39;]); 
if($id==0) exit; 
//查询数据 
$query = mysql_query("select * from dress where id!=&#39;$id&#39;"); 
$total = mysql_num_rows($query); 
$arr = array(); 
if($total==0){ 
 $arr[&#39;msg&#39;] = &#39;没有足够的衣服！&#39;; 
}else{ 
 $arr[&#39;msg&#39;] = 1; 
 while($row=mysql_fetch_array($query)){ 
  $pros[] = array( 
   &#39;id&#39; => $row[&#39;id&#39;], 
   &#39;color&#39; => $row[&#39;color&#39;], 
   &#39;pic&#39; => $row[&#39;pic&#39;] 
  ); 
 } 
 //随机取一组数据 
 $arr[&#39;pro&#39;] = $pros[array_rand($pros)]; 
} 
//输出JSON格式数据 
echo json_encode($arr); 
?>

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