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

原创文章 作者:月光光 2015年01月25日 15:39helloweba.com 标签:HTML5  PHP  jQuery 

在上一篇文章中,我们了使用HTML5可以侦听到手机晃动从而实现摇一摇效果。手机摇一摇可以应用到很多场景中,如摇一摇换抽奖,摇一摇搜歌等。本文我将给大家介绍如何使用HTML5+PHP+jQuery实现手机摇一摇换衣效果。

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

HTML

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

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

然后在页面中加载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');
声明:本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/288.html

8条评论

  • 月光光做哪些语言/框架开发了?

  • 换图成功了,不过感觉不怎么灵敏,要很用力的摇

  • [xyj拜年][好得意]

  • 唉,,自己调试不成功。。

  • 是换图了

  • 恩 刚开始摇没反应 后来才看到效果 不错 很喜欢

  • 手机访问demo

  • 没有啊