如何使用jQuery和HTML5实现手机摇一摇的换衣特效
手机摇一摇可以应用到很多场景中,如摇一摇换抽奖,摇一摇搜歌等。本文我将给大家介绍如何使用HTML5+PHP+jquery实现手机摇一摇换衣效果。
注意,这是一篇WEB知识综合应用的文章,阅读本文前提是,您需要有HTML5,jQuery,PHP,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实现手机摇一摇的换衣特效的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 如何使用jQuery和HTML5实现手机摇一摇的换衣特效
本文地址: https://pptw.com/jishu/584206.html