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 相关文章推荐
javascript 读取xml,写入xml 实现代码
Jul 10 Javascript
用js来解决ajax读取页面乱码
Nov 28 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
select标记美化--JS式插件、后期加载
Apr 01 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
JS中判断null、undefined与NaN的方法
Mar 26 Javascript
js实现tab切换效果实例
Sep 16 Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
vue生命周期钩子函数以及触发时机
Apr 26 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
晶体管来复再生式二管收音机
2021/03/02 无线电
php实现ping
2006/10/09 PHP
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
介绍几个array库的新函数 php
2006/12/29 PHP
PHP获取当前url的具体方法全面解析
2013/11/26 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
js实现点击选项置顶动画效果
2020/08/25 Javascript
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
DataReader和DataSet的异同
2014/12/31 面试题
创业计划书如何编写
2014/02/06 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
律师函格式范本
2015/05/27 职场文书
六年级数学教学反思
2016/02/16 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers