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 ui bootstrap 实现自定义风格
Nov 14 Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
js实现简单的倒计时
Jan 28 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
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
php中过滤非法字符的具体实现
2013/10/29 PHP
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
javascript中常用编程知识
2013/04/08 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
[01:04:14]OG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
详解python tcp编程
2020/08/24 Python
python实现单机五子棋
2020/08/28 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
策划助理岗位职责
2013/11/18 职场文书
电气自动化专业职业规划范文
2014/02/16 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
室内趣味活动方案
2014/08/24 职场文书
超级礼物观后感
2015/06/15 职场文书
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL