PHP+jQuery+HTML5手机摇一摇美女换衣

来源:https://www.sucaihuo.com/php/300.html 2015-08-20 18:53浏览(4037) 收藏

之前我们了使用HTML5可以侦听到手机晃动从而实现摇一摇效果。手机摇一摇可以应用到很多场景中,如摇一摇换抽奖,摇一摇搜歌等。今天我们以实例展示PHP+jQuery+HTML5手机摇一摇美女换衣。
PHP+jQuery+HTML5手机摇一摇美女换衣
分类:PHP > 插件 难易:高级
下载资源 下载积分: 30 积分
有问题,点击联系客服

HTML

<div id="pro" rel="1"> 
    <p>使劲晃动您的手机</p> 
    <img src="images/z1.jpg" width="300" height="300"> 
    <p>穿着红衣的美女</p> 
</div>

然后在页面中加载jQuery库文件,同时我们继续沿用上一篇文:<a href='http://www.sucaihuo.com/js/299.html'>《HTML5手机重力与方向感应的应用——摇一摇效果》</a>中用到的侦听手机摇晃的代码: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); 
            } 
        }); 
    } 
};

product.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); 
?>

dress.sql

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');
标签: 摇一摇换衣
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2