如何使用jQuery和HTML5实现手机摇一摇的换衣特效

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

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

HTML

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

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

然后在页面中加载jQuery库文件，同时我们继续沿用上一篇文：《用HTML5实现手机摇一摇的功能的教程》中用到的侦听手机摇晃的代码：shake.js。

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

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

PHP

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

 ?php //连接数据库 include_once( connect.php $id = intval($_GET[ id if($id==0) exit; //查询数据 $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 ]  //随机取一组数据  $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 

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP ！

相关推荐：

html5实现兼容各大浏览器的播放器的解析

HTML打折计算价格的实现原理与脚本代码

以上就是如何使用jQuery和HTML5实现手机摇一摇的换衣特效的详细内容，其它编程语言

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。