0
回答
PHP+jQuery+HTML5手机摇一摇美女换衣
滴滴云服务器,限时包月0.9元,为开发者而生>>>   

下载演示地址:http://www.erdangjiade.com/js/300.html
完整代码如下:

  1. HTML
  2.  
  3. <div id="pro" rel="1">  
  4.     <p>使劲晃动您的手机</p>  
  5.     <img src="images/z1.jpg" width="300" height="300">  
  6.     <p>穿着红衣的美女</p>  
  7. </div>
  8.  
  9. 然后在页面中加载jQuery库文件,同时我们继续沿用上一篇文:《HTML5手机重力与方向感应的应用——摇一摇效果》中用到的侦听手机摇晃的代码:shake.js。
  10.  
  11. <script src="jquery.js"></script>  
  12. <script src="shake.js"></script>
  13.  
  14. jQuery
  15.  
  16. 我们使用shake.js检测到用户手机摇晃,当摇晃发生时调用函数shakeEventDidOccur(),向后台product.php发送Ajax请求,后台程序会根据提交的请求参数返回相应的JSON数据。我们根据返回的数据显示对应的产品图片和文字信息,实现了换衣的效果。
  17.  
  18. window.onload = function() {  
  19.     var myShakeEvent = new Shake({  
  20.         threshold: 15  
  21.     });  
  22.   
  23.     myShakeEvent.start();  
  24.   
  25.     window.addEventListener('shake', shakeEventDidOccur, false);  
  26.   
  27.     function shakeEventDidOccur () {  
  28.         var pro_id = $("#pro").attr("rel");  
  29.         $.getJSON("product.php?id="+pro_id,function(json){  
  30.             if(json.msg==1){  
  31.                 $("#pro").attr("rel",json.pro.id)  
  32.                 .html('<img src="images/'+json.pro.pic+'" width="300" height="300"><p>'+json.pro.color+'</p>');  
  33.             }else{  
  34.                 alert(json.msg);  
  35.             }  
  36.         });  
  37.     }  
  38. };
  39.  
  40. product.php
  41.  
  42. 后台product.php根据接收ajax提交过来的参数id,查询数据库中除当前id以外的数据信息,获取到相应的数据集结果,然后随机从数据集中取出一组数据(因为每次只展示一条数据信息),以JSON格式返回给前端调用,请看代码:
  43.  
  44. <?php  
  45. //连接数据库  
  46. include_once("connect.php");  
  47.   
  48. $id = intval($_GET['id']);  
  49. if($id==0) exit;  
  50. //查询数据  
  51. $query = mysql_query("select * from dress where id!='$id'");  
  52. $total = mysql_num_rows($query);  
  53. $arr = array();  
  54. if($total==0){  
  55.     $arr['msg'] = '没有足够的衣服!';  
  56. }else{  
  57.     $arr['msg'] = 1;  
  58.     while($row=mysql_fetch_array($query)){  
  59.         $pros[] = array(  
  60.             'id' => $row['id'],  
  61.             'color' => $row['color'],  
  62.             'pic' => $row['pic']  
  63.         );  
  64.     }  
  65.     //随机取一组数据  
  66.     $arr['pro'] = $pros[array_rand($pros)];  
  67. }  
  68. //输出JSON格式数据  
  69. echo json_encode($arr);  
  70. ?>
  71.  
  72. dress.sql
  73.  
  74. CREATE TABLE IF NOT EXISTS `dress` (  
  75.   `id` int(11) NOT NULL AUTO_INCREMENT,  
  76.   `color` varchar(30) NOT NULL,  
  77.   `pic` varchar(30) NOT NULL,  
  78.   PRIMARY KEY (`id`)  
  79. ) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;  
  80.   
  81. INSERT INTO `dress` (`id`, `color`, `pic`) VALUES  
  82. (1, '灰色', 'z1.jpg'),  
  83. (2, '紫色', 'z2.jpg'),  
  84. (3, '红色', 'z3.jpg'),  
  85. (4, '蓝色', 'z4.jpg');
<无标签>
举报
小薄在上海
发帖于9个月前 0回/584阅
顶部