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.ajax)
Nov 19 Javascript
javascript 内存回收机制理解
Jan 17 Javascript
简单的jquery拖拽排序效果实现代码
Sep 20 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
在vue中axios设置timeout超时的操作
Sep 04 Javascript
javascript的setTimeout()使用方法总结
Nov 20 Javascript
在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
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
简单的自定义php模板引擎
2016/08/26 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
python常见的格式化输出小结
2016/12/15 Python
python装饰器实例大详解
2017/10/25 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
wxPython实现带颜色的进度条
2019/11/19 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
Django返回HTML文件的实现方法
2020/09/17 Python
Django实现随机图形验证码的示例
2020/10/15 Python
Django实现简单的分页功能
2021/02/22 Python
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
个人自荐书
2013/12/20 职场文书
一份婚庆公司创业计划书
2014/01/11 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
裁员通知
2015/04/25 职场文书