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 相关文章推荐
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
Mar 21 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
Javascript中prototype的使用详解
Jun 18 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 Javascript
简单了解JavaScript作用域
Jul 31 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
德生PL660的电路分析和打磨
2021/03/02 无线电
PHP递归删除目录几个代码实例
2014/04/21 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
javascript 隔行换色函数代码
2010/10/24 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
angular json对象push到数组中的方法
2018/02/27 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
深入理解Python3中的http.client模块
2017/03/29 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
python里 super类的工作原理详解
2019/06/19 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
Django models文件模型变更错误解决
2020/05/11 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
CSS3的resize属性使用初探
2015/09/27 HTML / CSS
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
产品工艺师的岗位职责
2013/11/15 职场文书
满月酒答谢词
2014/01/14 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
护士个人年度总结范文
2015/02/13 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
python pygame 开发五子棋双人对弈
2022/05/02 Python
Apache自带的ab压力测试工具的实现
2022/07/23 Servers