jQuery+HTML5实现手机摇一摇换衣特效


Posted in Javascript onJune 05, 2015

手机摇一摇可以应用到很多场景中,如摇一摇换抽奖,摇一摇搜歌等。本文我将给大家介绍如何使用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');

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
jQuery之自动完成组件的深入解析
Jun 19 Javascript
javascript去掉前后空格的实例
Nov 07 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
js事件绑定快捷键以ctrl+k为例
Sep 30 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
jquery延迟对象解析
Oct 26 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
express框架中使用jwt实现验证的方法
Aug 25 Javascript
Vuex实现简单购物车
Jan 10 Vue.js
在JavaScript中使用NaN值的方法
Jun 05 #Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 #Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 #Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Jun 05 #Javascript
javascript实现删除前弹出确认框
Jun 04 #Javascript
jquery插件validation实现验证身份证号等
Jun 04 #Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 #Javascript
You might like
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
javascript css float属性的特殊写法
2008/11/13 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
python super的使用方法及实例详解
2019/09/25 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
详解Canvas事件绑定
2018/06/27 HTML / CSS
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
企业厂长岗位职责
2013/12/17 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
面试通知邮件
2015/04/20 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
让生命充满爱观后感
2015/06/08 职场文书
Django使用redis配置缓存的方法
2021/06/01 Redis
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android