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

来源：动视网责编：小采时间：2020-11-27 21:39:04

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

jQuery+HTML5实现手机摇一摇换衣特效_jquery:手机摇一摇可以应用到很多场景中，如摇一摇换抽奖，摇一摇搜歌等。本文我将给大家介绍如何使用HTML5+PHP+jQuery实现手机摇一摇换衣效果。注意，这是一篇WEB知识综合应用的文章，阅读本文前提是，您需要有HTML5，jQuery，PHP，MySQL等相关方面的基础知

推荐度：

点击下载本文 文档为doc格式

导读jQuery+HTML5实现手机摇一摇换衣特效_jquery:手机摇一摇可以应用到很多场景中，如摇一摇换抽奖，摇一摇搜歌等。本文我将给大家介绍如何使用HTML5+PHP+jQuery实现手机摇一摇换衣效果。注意，这是一篇WEB知识综合应用的文章，阅读本文前提是，您需要有HTML5，jQuery，PHP，MySQL等相关方面的基础知

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

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

HTML

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

使劲晃动您的手机

灰色

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

jQuery

我们使用shake.js检测到用户手机摇晃，当摇晃发生时调用函数shakeEventDidOccur()，向后台product.php发送Ajax请求，后台程序会根据提交的请求参数返回相应的JSON数据。我们根据返回的数据显示对应的产品图片和文字信息，实现了换衣的效果。

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

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

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

推荐度：

点击下载本文 文档为doc格式

标签： html5 jQuery 换衣

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐