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

前端之家收集整理的这篇文章主要介绍了jQuery+HTML5实现手机摇一摇换衣特效前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

手机摇一摇可以应用到很多场景中,如摇一摇换抽奖,摇一摇搜歌等。本文我将给大家介绍如何使用HTML5+PHP+jQuery实现手机摇一摇换衣效果

注意,这是一篇WEB知识综合应用的文章,阅读本文前提是,您需要有HTML5,jQuery,PHPMysqL等相关方面的基础知识。

HTML

页面中默认展示产品信息(某品牌连衣裙产品图片文字说明),当然实际应用中可以从数据库获取产品信息。

<div id="pro" rel="1">

使劲晃动您的手机

灰色

然后在页面中加载jQuery库文件,同时我们继续沿用上一篇文:《功能的教程》中用到的侦听手机摇晃的代码:shake.js。

<script src="jquery.js">
<script src="shake.js">

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">

'+json.pro.color+'

');
}else{
alert(json.msg);
}
});
}
};

PHP

后台product.PHP根据接收ajax提交过来的参数id,查询数据库中除当前id以外的数据信息,获取到相应的数据集结果,然后随机从数据集中取出一组数据(因为每次只展示一条数据信息),以JSON格式返回给前端调用,请看代码

PHP;">

<?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数据表结构:

sql;">

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');

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

猜你在找的jQuery相关文章