jQuery+HTML5实现手机摇一摇换衣特效

微信新世界：将摇一摇技术搬至手机Web端

大家好！在微信上，我们经常使用“查附近的人”功能，这都得益于手机摇一摇技术在app上的精彩应用。今天，我要给大家带来一个好消息，我们将这项技术搬移至手机Web端，供各位学习。有需要的小伙伴，快来一起看看吧！

你是否曾经想过，在手机Web上也能实现摇一摇功能呢？答案是肯定的，而且我们还可以将其应用到更多场景中，比如摇一摇抽奖、摇一摇搜歌等。今天，我要给大家介绍的是如何使用HTML5、PHP和jQuery实现手机摇一摇换衣效果。

在开始之前，你需要具备一些基础知识，包括HTML5、jQuery、PHP和MySQL等。准备好了吗？让我们一起进入这个充满创意的世界！

让我们从HTML部分开始。在页面中，我们默认展示某品牌连衣裙的产品图片和文字说明。实际应用中，你可以从数据库中获取这些信息。

接下来，加载jQuery库文件，并沿用之前文章中使用的侦听手机摇晃的代码shake.js。当手机摇晃时，我们会调用一个函数shakeEventDidOur()，向后台的product.php发送Ajax请求。后台程序会根据请求参数返回相应的JSON数据。然后，我们根据返回的数据显示对应的产品图片和文字信息，实现换衣效果。

接下来是jQuery部分。我们使用shake.js来检测用户的手机摇晃动作。当摇晃发生时，我们调用shakeEventDidOur()函数。这个函数会获取当前产品的ID，并向product.php发送Ajax请求。如果请求成功并返回了有效的数据，我们就会更新页面上的产品图片和文字信息。

让我们来看看PHP部分。后台的product.php会根据接收到的Ajax请求中的参数id，查询数据库中的其他数据信息。然后，它会随机选择一条数据，以JSON格式返回给前端。

```php

// 开始PHP会话

// 根据条件逻辑进行操作

if (满足条件的情况) {

// 处理相关逻辑...

} else {

$arr['msg'] = 1; // 设置消息标志位

// 执行数据库查询操作

$query = 执行数据库查询语句(); // 执行具体的数据库查询操作，获取数据结果集

while ($row = mysql_fetch_array($query)) { // 循环遍历查询结果集

// 构建包含id、color和pic的数据数组

$pros[] = array(

'id' => $row['id'], // 从数据库中提取ID赋值给当前数组的id键

'color' => $row['color'], // 从数据库中提取颜色赋值给当前数组的color键

'pic' => $row['pic'] // 从数据库中提取图片路径赋值给当前数组的pic键

);

}

// 从数组中随机选取一条记录进行展示

$arr['pro'] = $pros[array_rand($pros)]; // 随机选择一条记录作为展示数据

}

// 输出JSON格式数据，确保数据的可读性并兼容各种客户端需求

echo json_encode($arr); // 将数组转换成JSON格式并输出到浏览器端或者客户端脚本中处理使用。

?>

CREATE TABLE IF NOT EXISTS `dress` (