手机网页摇一摇换装游戏，HTML5+PHP+jQuery带你体验全新玩法

现在的手机APP功能超级赞，各种各样的都有，就比如说那个摇一摇，用起来还挺有意思的。比如像微信这样的软件，就常常用到这个功能找到附近的朋友。那你知道吗？其实这种好玩的技术也能用在我们的手机网页上，让体验更加丰富多彩。下面我要教大家怎么用地道的HTML5、PHP和jQuery做个手机网页摇一摇换装游戏，希望对大家有用。

HTML5页面展示产品信息

想做手机浏览器里的摇晃换装效果，第一步就是在HTML网页里展示衣物信息。这个信息可能就是某个牌子的衣服照片和简单介绍。当你进入这个网页，就能立马看到那个样子。当然了，实际用的话，这些信息要从数据库里拿取然后动态展示出來。利用HTML5的标记语言，我们就能把所有信息清晰地展现在网页上，方便接下来的使用。

 
 
 
使劲晃动您的手机
 
  
 
灰色
 

引入jQuery库文件和shake.js

让手机网页有摇一摇功能，就得先装上jQuery和那个叫shake.js的东西。jQuery，就是前端开发里常用的JavaScript库，能帮你方便地操作页面元素和处理事件啥的。至于那shake.js，顾名思义，就是用来侦测手机摇晃的，人摇动手机时候它就能触发出一些反应。装好这俩东西后，咱们就可以开始构建这个功能了。

利用jQuery检测手机摇晃

咱们用 shake.js这个软件来监测你手机的抖动情况，只要你摇晃手机，那个叫shakeEventDidOccur()的函数就会被激活启动。在这家伙里头，你就能往后台发出个Ajax请求去product.php页面。然后后台product.php程序就能看到你传来的所有信息，包括但是不限于你正在处理的ms。最后，它会根据这些信息给你回一个JSON数据回来，全部都给你弄得明明白白。

PHP后台处理数据

 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('
'+json.pro.color+'
'); 
   }else{ 
    alert(json.msg); 
   } 
  }); 
 } 
};

产品.php里，得搞明白前端传来的那个Ajax请求参数id，查查数据库里除了当前id以外的其他资料。取到数据以后，经过PHP的加工，挑出一条给前端看。所以PHP逻辑要搞清楚，速度还要快，每页只能显示一条信息。你可以按实际情况来优化PHP代码，让它更好地帮你完成项目任务。

MySQL数据表结构设计

咱们想把手机上的web功能升级成“摇一摇换装”，那儿，数据库设计就起关键作用！得先搞明白怎么用MySQL的表格来存放商品信息之类的东西，以及怎样让整个系统稳稳当当又快如闪电。下面这篇文章给大家展示了一个超易上手的MySQL表构建方案，希望大伙儿能学以致用~

说白了，这篇文章就是教你怎么用HTML5、PHP、jQuery来打造手机网页版的摇一摇换装特效。我们通过讲解演示、手机探测、后台操作这些步骤，让你真正明白何为这种技术。在实践时，你还能灵活调整代码，使它更好地适应不同情境下的需求。

  $row['id'], 
   'color' => $row['color'], 
   'pic' => $row['pic'] 
  ); 
 } 
 //随机取一组数据 
 $arr['pro'] = $pros[array_rand($pros)]; 
} 
//输出JSON格式数据 
echo json_encode($arr); 
?>

。