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

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

  <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>

jQuery

  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  //连接数据库  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);  ?>

  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实现手机摇一摇的换衣特效的详细内容，更多内容请关注技术你好其它相关文章！