导航：首页 > 开发技术 >

HTML5+PHP+jQuery如何实现手机摇一摇换衣

发表于：2026-10-31 作者：千家信息网编辑

千家信息网最后更新 2026年10月31日，HTML5+PHP+jQuery如何实现手机摇一摇换衣，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。手机摇一摇可以应用到很多场景中，如摇

千家信息网最后更新 2026年10月31日HTML5+PHP+jQuery如何实现手机摇一摇换衣

HTML5+PHP+jQuery如何实现手机摇一摇换衣，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

手机摇一摇可以应用到很多场景中，如摇一摇换抽奖，摇一摇搜歌等。我将给大家介绍如何使用HTML5+PHP+jQuery实现手机摇一摇换衣效果。

注意，这是一篇WEB知识综合应用的文章，阅读本文前提是，您需要有HTML5，jQuery，PHP，MySQL等相关方面的基础知识。

HTML

我页面中默认展示产品信息（某品牌连衣裙产品图片和文字说明），当然实际应用中可以从数据库中获取产品信息。

使劲晃动您的手机

  灰色

然后在页面中加载jQuery库文件，同时我们继续沿用上一篇文：《HTML5手机重力与方向感应的应用--摇一摇效果》中用到的侦听手机摇晃的代码：shake.js。

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?id="+pro_id,function(json){ if(json.msg==1){ $("#pro").attr("rel",json.pro.id) .html('

'+json.pro.color+'

'); }else{ alert(json.msg); } }); } };

PHP

后台product.php根据接收ajax提交过来的参数id，查询数据库中除当前id以外的数据信息，获取到相应的数据集结果，然后随机从数据集中取出一组数据（因为每次只展示一条数据信息），以JSON格式返回给前端调用，请看代码：

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

当然本文只是一个实例应用，开发中你可以根据实际应用优化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');

看完上述内容，你们掌握HTML5+PHP+jQuery如何实现手机摇一摇换衣的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注行业资讯频道，感谢各位的阅读！

很赞哦！